css - 如何更改悬停/突出显示的项目的背景颜色?

Question

如何更改悬停/突出显示的项目的背景颜色<p:selectOneMenu>？

我尝试了以下 CSS 选择器，但它们没有任何效果。

.ui-selectonemenu-items :hover{
    background-color: #a9c6c9;
}
.ui-selectonemenu-label:hover {
    background-color: #a9c6c9;
}

这是JSF代码：

<p:selectOneMenu>
    <f:selectItem itemLabel="by id" itemValue="1" />
    <f:selectItem itemLabel="by owner" itemValue="2" />
</p:selectOneMenu>

HTML 输出：

<ul class="ui-selectonemenu-items ui-selectonemenu-list ui-widget-content ui-widget ui-corner-all ui-helper-reset" style="">
     <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all">Select Net</li>
     <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all ui-state-highlight">TEST</li>
     <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all">TEST1</li>
     <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all">TEST2</li>

Answer 1

根据 Chrome 开发工具（按 F12），它.ui-state-highlight是负责.ui-selectonemenu-item元素背景外观的类。

因此，您需要改写该类。

.ui-selectonemenu-item.ui-state-highlight {
    background-color: #a9c6c9;
}

顺便说一句，Firefox (Firebug) 和 IE9 具有相同的工具。右键单击 HTML 表示中的元素并选择Inspect Element，或者只需按 F12 即可查看它。

Answer 2

试试这个：

.ui-selectonemenu-item.ui-selectonemenu-list-item.ui-state-highlight {
    background: #a9c6c9;
}