如何覆盖 CSS：悬停？答案

【问题标题】：How to override CSS :hover?如何覆盖 CSS：悬停？
【发布时间】：2011-08-12 03:50:59
【问题描述】：

我有这个 HTML 代码：

<ul>
    <li>Line 1</li>
    <li class="disabled">Line 2</li>
</ul>

而对应的CSS是：

ul li:hover {
    color: red;
}

这允许将两个lis 悬停在上面并改变它们的颜色。但如果我希望其中一个是disabled，我会使用以下内容：

.disabled {
    color: grey;
}

但是其他 CSS 代码的 hover 伪类仍然有效。有什么办法可以覆盖它吗？

【问题讨论】：

标签： css

【解决方案1】：

因为CSS specificity，第一条规则会覆盖它，即它更具体。

将第二条规则改为：

ul li.disabled, ul li.disabled:hover{
    color:grey;
}

【讨论】：

使用 !important 可能会反过来咬你，@Procrammer 的方法是更好的选择。
如果项目应该一直是灰色的，而不仅仅是在悬停时，这将不起作用：fiddle.jshell.net/88Z5Q/1
我还发现使用 ul li:not(.disabled):hover{color:red} 之类的东西是值得的 - 这会将悬停效果应用于所有未添加 .disabled 类的 li 元素...
相关说明：“text-decoration”不能被覆盖。 - stackoverflow.com/questions/4481318/…

【解决方案2】：

将您的 CSS 更改为：

ul li:hover{
    color:red;
}

.disabled ,.disabled:hover{
    color:grey;
}

See this fiddle

【讨论】：

【解决方案3】：

你只需要改变你的CSS：

ul li:hover{ 红色; }

ul li.disabled,ul li.disabled:hover{ 颜色：灰色； }

你必须禁用悬停效果，所以你给它与没有悬停时相同的颜色。

【讨论】：

【解决方案4】：

.disabled{
    color:grey !important;
}

【讨论】：

尽量避免使用!important。这可能会导致维护问题。
我同意...虽然这确实修复了示例，但开发案例需要更多技巧...
为什么要避免？你能给我一个描述的链接吗？
在较大的项目中，您可能会以一个球泥结束，每个人都试图覆盖样式。使用 !important 是 CSS 结构不佳的标志。首先，他们尝试使用更长的选择器，最后你有一堆 !important 语句。所以 !important 不是邪恶的，但它表明你的 CSS 结构不好。看看 OOCSS 和这个博客：stubbornella.org 了解更多关于如何构建可扩展的 css 的信息。

【解决方案5】：

我试图在执行以下 javascript 时自动应用 CSS“禁用”效果：

  document.getElementById("TheButton").disabled = true;

如果“TheButton”是用“TheClass”类定义的：

  .TheClass { background-color: LightBlue; }
  .TheClass:hover { background-color: Cyan; }

唯一对我有用的是这个 CSS：

  .TheClass[disabled]            { background-color: lightgrey; } /* for IE */
  .TheClass[disabled='disabled'] { background-color: lightgrey; } /* for Chrome */
  .TheClass[disabled]:hover            { background-color: lightgrey; } /* for IE */
  .TheClass[disabled='disabled']:hover { background-color: lightgrey; } /* for Chrome */

【讨论】：

【解决方案6】：

最低限度，如果每次只需要灰色，不需要:hover on .disabled

ul li:hover{
  color:red;
}
ul li.disabled{// Last rule precedence
   color:grey;
}

或者为了加快更新速度，使用 !important:

.disabled{
  color:grey !important;
}
ul li:hover{
   color:red;
}

【讨论】：

【解决方案7】：

您可以在 css 中执行以下操作，以便在我们将鼠标悬停在其上时丢弃禁用元素的任何颜色。

ul li:hover:not(:disabled) {
        color: red;
    }

这将导致仅在未禁用列表时应用颜色红色。

【讨论】：

:active 表示“在被点击时”（ish）而不是“在未被禁用时”