在悬停时更改选择列表选项背景颜色

Posted 2021-05-05

是否可以在悬停时更改选择列表选项的默认背景颜色？

html：

<select id="select">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

我试过option:hover { background-color: red; }，但没用。有人知道怎么做这个吗？

答案

这可以通过实现插入框阴影来完成。例如：

select.decorated option:hover {
    box-shadow: 0 0 10px 100px #1882A8 inset;
}

这里，.decorated是分配给选择框的类。

希望你明白这一点。

另一答案

选择/选项元素由操作系统呈现，而不是HTML。您无法更改这些元素的样式。

另一答案

实现嵌入框阴影CSS适用于Firefox：

select option:checked,
select option:hover {
    box-shadow: 0 0 10px 100px #000 inset;
}

选中的选项在Chrome中有效：

select:focus > option:checked { 
    background: #000 !important;
}

另一答案

问题是即使javascript也没有看到option元素被徘徊。这只是为了强调如何通过仅使用CSS来解决它（至少很快就会解决）：

window.onmouseover = function(e)
{
 console.log(e.target.nodeName);
}

解决此问题的唯一方法（除了等待数千年的浏览器供应商修复错误，更不用说困扰你正在尝试做的事情了）就是用JavaScript替换下拉菜单和你自己的HTML / XML。这可能涉及使用select元素替换ul元素以及每radio元素使用input li元素。

另一答案

在FF也CSS过滤器工作正常。例如。色相旋转：

option {
    filter: hue-rotate(90deg);
}

https://jsfiddle.net/w3a740jq/4/

另一答案

我意识到这是一个较老的问题，但我最近遇到了这个需求，并提出了使用jQuery和CSS的以下解决方案：

jQuery('select[name*="lstDestinations"] option').hover(
        function() {
            jQuery(this).addClass('highlight');
        }, function() {
            jQuery(this).removeClass('highlight');
        }
    );

和css：

.highlight {
    background-color:#333;
    cursor:pointer;
}

也许这有助于其他人。

另一答案

这就是你需要的，儿童组合子：

    select>option:hover
    {
        color: #1B517E;
        cursor: pointer;
    }

尝试一下，效果很好。

这是参考：http://www.w3schools.com/css/css_combinators.asp