Question

如何使用CSS更改光标经过<select>时突出显示<li>的颜色{{1}}的突出显示颜色？

Answer 1

不知道你对“突出显示<li>”的颜色的意思，但听起来你想改变<option>元素的背景颜色。我尝试了它并没有用，你总是得到系统颜色。

如果你想在鼠标悬停时突出显示整个<select>元素，这种方法有效：

select:hover { background-color: red; }

然而，不同浏览器的行为有所不同。例如，Chrome不会突出显示下拉列表中的选项; Firefox确实如此，但是如果你将鼠标移开并且它们仍被拉下来它就不会改变它们。

正如许多类似问题所述，无法可靠地设置表单控件。 See here了解更多详情。

Answer 2

您无法通过 - ＆gt;等更改选项的突出显示颜色background:#f9f9f9

您可以这样做：

            select > option:hover{
                box-shadow: 0 0 10px 100px #FED20F inset;
                transition: all .2s ease-in-out;
            }

Answer 3

如上所述，设置background-color会起作用，但是:hover在IE7中有问题 - 将doctype设置为严格会有所帮助。

Answer 4

您可以使用：hover伪类

例如

.classOfElementToColor:hover {background-color:red; color:black}

适用于大多数浏览器，但不适用于IE6中的所有元素

Answer 5

只需使用此CSS选择器：

select option:hover {
    background-color: yellow;
}

更改<select>突出显示颜色</select>

5 个答案: