Question

当我将鼠标悬停在列表元素（这是一个矩形）上时，我试图将其设置为内部所有文本变为白色，并且背景变为橙色。

我的问题是当你将鼠标悬停在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; 
}

Answer 1

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

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

Answer 2

将此用于悬停：

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

无需重新定义课程，只需将其应用于.discProd

即可

DEMO：http://jsfiddle.net/tD8Mv/

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

2 个答案: