如何在悬停时更改 select 选项项的颜色？

Question

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

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

谢谢

Answer 1

yourSelectOption:hover {
    background-color: yourDesiredColor;
}

请注意您想要设置样式后的 :hover。

希望对您有所帮助！

Answer 2

您可以使用 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>

select 列表 class 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>

在此之后，您可以 change/add CSS 的以下属性：

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

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

Answer 3

// 将每个列表选项背景更改为红色

.mat-list-base .mat-list-option { background-color: red; }

// 悬停时将每个列表选项背景更改为蓝色

.mat-list-base .mat-list-option:hover { background-color: blue; }

如何在悬停时更改 select 选项项的颜色？

How to change the colour of select option's items on hover?

css

html-select