CSS下拉菜单列表颜色在谷歌浏览器中悬停时不会改变答案

【问题标题】：CSS drop down menu list color does not change on hover in Google chromeCSS下拉菜单列表颜色在谷歌浏览器中悬停时不会改变
【发布时间】：2016-04-27 06:37:58
【问题描述】：

我有 CSS 下拉菜单的问题，它在悬停时在 chrome 中不起作用。

预期行为：悬停在任何列表项上应将背景颜色更改为使用 CSS 规则设置的颜色。

实际行为：即使鼠标悬停在列表项上，默认颜色（蓝色）也会保持不变。

如果我在 Internet Explorer(IE 10,11) 中运行相同的代码，它绝对可以正常工作，但在 chrome 中却不行。我的 chrome 版本是 47。

我的代码：

 <style> option:hover {
   background: #01A982;
 }
 </style>

<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

JsFiddle 链接： https://jsfiddle.net/sandeepb/p7jz9g95/

【问题讨论】：

代码在哪里？在此处发布您的示例代码
发布您的代码或添加小提琴
您能发布您的代码吗？
欢迎来到 Stack Overflow！寻求代码帮助的问题必须包含在问题本身中重现它所需的最短代码。见How to create a Minimal, Complete, and Verifiable example

标签： jquery html css

【解决方案1】：

Chrome 不支持选项元素上的:hover。没有一个简单的解决方法。如果您确实需要 Chrome 中的 :hover 支持，您将需要使用 javascript 解决方案或其他类型的元素，这些元素的外观和行为都类似于选择。

【讨论】：

【解决方案2】：

由于 select 和 option 标签在设置样式时会遇到一些麻烦，也许将您的 select/options 元素更改为列表元素会对您有所帮助：

Convert select dropdown into unordered list with jquery

【讨论】：