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

Question

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

非常感谢任何帮助。

谢谢

Answer 1

您可以使用bootstrap-select：

来实现目标

您需要以下内容：

<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;
}

当您将鼠标悬停在列表项上时，您将获得此信息：

Answer 2

yourSelectOption:hover {
    background-color: yourDesiredColor;
}

在您要设置样式之后注意:hover。

希望这有帮助！

Answer 3

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

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

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

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