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

Posted 2023-05-08

【中文标题】将鼠标悬停在 li 上时如何更改所有字体颜色

【英文标题】：How to change all font color when hovering over an 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; 

【参考方案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/