CODEWITHSUNDEEP
htmlcssbackgroundhoverhtml-lists
Michelle Flandin
Michelle Flandin

Reputation: 32

How to change all font color when hovering over an li

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; 
}

Upvotes: 0

Views: 1130

Answers (2)

suff trek
suff trek

Reputation: 39777

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/

Upvotes: 0

Jack
Jack

Reputation: 2830

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; }

Upvotes: 3

Related Questions