在 html 选择中悬停或选择项目时，如何避免更改背景颜色？

Posted 2023-05-08

【中文标题】在 html 选择中悬停或选择项目时，如何避免更改背景颜色？

【英文标题】：How can I avoid change of background color when hoovering or selecting an item in a html select?

【发布时间】：2020-12-03 14:10:17

【问题描述】：

我的页面中有一个下拉菜单供用户选择颜色。

但是当用户尝试选择一种颜色并将鼠标悬停在所选项目的顶部时，浏览器会自动更改项目的颜色，这使他难以做出选择。

我想让浏览器保持背景颜色不变，也许在悬停时画一个黄色边框但不改变背景颜色，我怎样才能得到那种效果？ 这是我的选择

定义

<option value="#DC626D" style="background: #DC626D"></option>
<option value="#E8825D" style="background: #E8825D"></option>
<option value="#FFCD8F" style="background: #FFCD8F"></option>
<option value="#FDEE65" style="background: #FDEE65"></option>
<option value="#52CE90" style="background: #52CE90"></option>

【问题讨论】：

将鼠标悬停在您的选项上是在相应的 CSS 文件中完成的。鼠标悬停效果没有自定义突出显示选项。可能在您的模板的 CSS 中描述了这种效果。尝试在 Chrome 中打开开发者控制台（ctrl+shift+i）。选择检查元素。使用箭头选择您的项目。并寻找样式。

【参考方案1】：

您可以使用 css 选择器选项：hover 来处理任何悬停效果。

可能会复制这个CSS disable hover effect