Hover pseudo-class

This example shows the hover pseudo-class. The rule selects

HTML

<ul class="collection">
    <li> Label </li>
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
</ul>

CSS

/*
 * Try this:
 * 1. What is necessary to turn this example into a menu?
 * 2. What HTML will achieve this?
 *    Don't worry if links don't style quite right, we'll 
 *    look at this more deeply later.
 */

/* Use the hover pseudo-class to select for adjacent siblings that are list (li) elements that are also descendants of the collection class, but only match when the mouse is hovering over the element */
.collection li+li:hover {
    background-color: yellow;
}


/* Select adjacent siblings that are both list elements (li) and are also descendants of the collection class. */
.collection li+li {
    background-color: palegoldenrod;
}

/* Selects elements that are descendants of elements of class collection */


/* Selects list elements */
li {
    width: 100px;
    height: 50px;
    list-style-type: none;  /* removes bullet */
}