javascript - 当鼠标悬停在选项上时,如何将 SELECT <OPTION> 标记的背景颜色从蓝色更改为灰色?

标签 javascript jquery html css

我可以通过添加 size 来实现这一点,但是如果我删除它,它就不会再显示了。提前谢谢你。

<html>
<body>
  <select class="star" att="0" size="2">
    <option>Shell</option>
    <option>Cabbage</option>
    <option>Beans</option>
    <option>Cheese</option>
    <option>Clock</option>
    <option>Monkey</option>
  </select>
  <script>
    $(document).ready(function(event) {
      $('select').on('mouseenter', 'option', function(e) {
        this.style.background = "#DCDCDC";
      });
      $('select').on('mouseleave', 'option', function(e) {
        this.style.background = "none";
      });
    });
  </script>
</body>
</html>

最佳答案

你可以简单地用css实现这个

.star option {
    background-color: blue;
}
.star option:hover {
    background-color: grey;
}
<select class="star" att="0" size="2">
    <option>Shell</option>
    <option>Cabbage</option>
    <option>Beans</option>
    <option>Cheese</option>
    <option>Clock</option>
    <option>Monkey</option>
</select>

关于javascript - 当鼠标悬停在选项上时,如何将 SELECT <OPTION> 标记的背景颜色从蓝色更改为灰色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54868039/

相关文章:

html - 如何将html页面划分为2个静态div和1个可滚动div?

javascript - 禁用提交按钮,直到选中一组动态创建的单选按钮中的一个

javascript - 如何关联 javascript 中的两个对象?

javascript - 如何在特定位置用破折号分割字符串 JavaScript

javascript - 多个内联脚本是否比一个联合的内联脚本慢?

javascript - 在导航图标 css 下包装文本

javascript - JS参数绑定(bind)不起作用

javascript - 检测第一个 ul 元素并在内部更改 li 或使用 jquery .html() 创建新的 li

javascript - 使用 jquery 更改了选择上的选项,但使用 Chrome 却出现奇怪的结果

javascript - 只允许在 contentEditable <div> 内移动 <img>