css - 如何在悬停时更改选择选项元素的颜色？

Question

当用户将鼠标悬停在选择选项上时，我尝试更改选择选项的元素背景颜色。但是，我找不到解决问题的方法。然后我在网上搜索它，仍然无法找到解决方案。

如有任何帮助，我们将不胜感激。

谢谢

Answer 1

您可以通过使用引导选择来实现您的目标:

您将需要以下 CDN 链接:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>

带有selectpicker类的选择列表:

<select id="txtTitle" class="form-control selectpicker">
    <option selected disabled value="default">Please Select</option>
    <option value="Session">Session</option>
    <option value="Class">Class</option>
</select>

在此之后，您可以更改/添加 CSS 的以下属性:

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  text-decoration: none;
  color: #ffffff;
  background-color: #f3969a;
}

当您将鼠标悬停在列表项上时，您将看到: