将鼠标悬停在下拉菜单中

Question

有何方法在悬停在下拉菜单中时更改蓝色高光颜色？我正在使用我页面上的下拉列表。我有一个下拉菜单，允许您选择主题。

我非常感谢有关此主题的任何帮助或反馈。

Answer 1

该蓝色称为outline，用于辅助功能。 例如，当您按Tab键在表单元素之间移动时，通常会使用轮廓，以便用户知道当前选择的元素。

您可以使用以下CSS删除此大纲：

select:focus {
    outline: none;
}

但是，建议不要删除它。如果必须，您应该使用背景颜色，更改文本颜色或提供自定义大纲而不是浏览器默认值来提供替代样式。 例如：

select:focus {
    outline: 2px solid red;
}

Answer 2

.dropdown-item.active, .dropdown-item:active {
    background-color: red;
}

这些是Bootstrap类，如果您希望将鼠标悬停在下拉菜单项上（即处于“活动”状态）时更改突出显示的背景颜色，则需要覆盖这些类。

可以通过在Google Dev Tools（F12）中打开“元素”部分，然后突出显示要重设样式的元素来发现这些类。查找类的活动状态可能会有些棘手，并且可能需要深入研究HTML。