Question

通过使用Jquery，我试图将select框内的悬停颜色从默认的蓝色更改为红色。我知道select输入的悬停颜色依赖于操作系统，而不依赖于浏览器，但我接近预期的效果。

我的代码仅在我定义select的大小时才有效。对简单的select没有任何意义。而我无法理解为什么......

JSFiddle： http://jsfiddle.net/7bP2W/1/

代码：

 $(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中不起作用。

Answer 1

你确实正确地认为select（令人讨厌）依赖于操作系统，原因是可理解的（但仍然很烦人）。上述解决方案要求您仍然定义size。

如果没有一些技巧，没有理由改变简单的select。如果你真的想确保你的select被设置为另一个问题，那么可能需要查看Chosen，这是一个用于选择框的jQuery插件。

他们所做的就是将select更改为div和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>

然后使用该插件添加功能并将其设计为更好看。

无论如何，如果没有像Chosen这样的插件（除非你选择自己构建它），你现在拥有的最多可能是你能够完成的。

Answer 2

不幸的是，您无法更改这些元素的样式！ <select>或<option>。它们是HTML标记，并且自己呈现网页加载的时间。

将颜色悬停在选择框内

2 个答案: