如何更改悬停时选择选项项目的颜色？

Question

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

任何帮助将非常感激。

谢谢

Answer 1

您可以使用 bootstrap-select 来实现您的目标：

您将需要以下 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;
}

当您将鼠标悬停在列表项上时，您会得到以下信息：