Question: I am trying to make it so when I hover over a list element (which is a rectangle) all of the text inside turns white, and the background changes to orange. 

My problem is the text in the class "discProd" doesn't turn white when you hover over the li element. Only the first text turns white. 

**HTML**

```
<ol id="selectable">
    <li class="ui-state-list">
        <b>TD101</b> SmarTach + D: Tachometer</br>
        <h5 class="discProd">Discontinued - See TA300 for replacement model</h5>
    </li>
</ol>

```

**CSS**

```
/*normal paragraph */    
h6 { 
    font-size: 12px; 
    color:#2D2D2D; 
    font-weight:100; 
    line-height: 1.5em; 
}

.discProd { 
    font-size: 10px; 
    color: red; 
} 

#selectable { 
    list-style-type: none; 
    width: 900px; 
}

#selectable li:hover {
    background: orange; 
    color: white; 
}

.ui-state-list {
    border: 1px solid #d3d3d3;
    background: #e6e6e6 url(../images/Products/productBG5.png) 50% 50% repeat-x;
    /*searched bg gloss wave */
    font-weight: normal;
    color: #555555; 
}

```

Answer: 
You need to apply the hover effect separately to your `discProd` class, like so:

```
#selectable li:hover {background: orange; color: white; }
#selectable li:hover .discProd {background: orange; color: white; }

```
Use this for hover:

```
#selectable li:hover, #selectable li:hover > .discProd {
    background: orange; 
    color: white;
}

```

No need to redefine class, just apply the same to `.discProd` 

DEMO: <http://jsfiddle.net/tD8Mv/>