将鼠标悬停在 li 上时如何更改所有字体颜色答案

【问题标题】：How to change all font color when hovering over an li将鼠标悬停在 li 上时如何更改所有字体颜色
【发布时间】：2014-01-07 08:00:12
【问题描述】：

我试图做到这一点，当我将鼠标悬停在一个列表元素（它是一个矩形）上时，里面的所有文本都变成白色，背景变成橙色。

我的问题是当您将鼠标悬停在 li 元素上时，“discProd”类中的文本不会变成白色。只有第一个文本变成白色。

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

【问题讨论】：

标签： html css background hover html-lists

【解决方案1】：

您需要将悬停效果单独应用于您的discProd 类，如下所示：

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

【讨论】：

【解决方案2】：

将此用于悬停：

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

无需重新定义类，同样适用于.discProd

演示：http://jsfiddle.net/tD8Mv/

【讨论】：