Javascript 将颜色悬停在选择框内

通过使用Jquery，我试图将

select

框中的悬停颜色从默认的蓝色更改为红色。我知道

select

输入的悬停颜色取决于操作系统而不是浏览器，但我正在接近所需的效果

仅当我为

select

定义了尺寸时，下面的代码才起作用。对简单的

选择操作不执行任何操作。我就是不明白为什么

JSFiddle:

代码：

 $(document).ready(function(event) {
    $('select').on('mouseenter','option',function(e) {
      $(this).css({ "background-color": "red", "color": "white"});
    });

    $('select').on('mouseout','option',function(e) {
      $(this).css({ "background-color": "white", "color": "black"});
    });

});

在最新版本的Chrome、Firefox和Opera中测试。在IE11中不起作用。
您确实正确地认为
select
s（令人烦恼地）依赖于操作系统，原因是可以理解的（但仍然令人烦恼）。但是，上述解决方案要求您仍然定义
大小

没有理由在不使用一些技巧的情况下更改简单的
select
。如果您真的想确保您的
select
s在另一个问题上是样式化的，那么可能值得一看，一个用于选择框的jQuery插件

他们所做的是将
select
s更改为
div
s和
span
s，其样式类似于
select
。例如：

<div class="chosen-container chosen-container-single" style="width: 350px;" title="">
    <a class="chosen-single chosen-default" tabindex="-1">
        <span>Choose a Country...</span>
        <div>
            <b></b>
        </div>
    </a>
    <div class="chosen-drop">
        <div class="chosen-search">
            <input type="text" autocomplete="off" tabindex="2">
        </div>
        <ul class="chosen-results"></ul>
    </div>
</div>


选择一个国家。。。


该插件然后被用来添加功能和样式，使其看起来更好

无论如何，如果没有像Selected这样的插件（除非您选择自己构建），您现在拥有的可能是您能够完成的最多的部分。
不幸的是，您无法更改这些元素的样式<代码>

或

。它们是HTML标记，在网页加载时呈现自身。

再次检查fiddel链接谢谢！我将对此进行研究，但我希望这可以在没有外部插件的情况下实现…@user3002057如上所述，您可以尝试自己编写，但我不推荐这样做。CSS文件为11KB，JS文件为27KB。就带宽而言，可能不会对您的项目造成太大的伤害。@Luxelin-不幸的是，Selected显然不支持。我需要它，似乎我被卡住了…@user3002057这里是一些其他jQuery下拉插件。