如何覆盖CSS中的:hover效果？

Question

我可以帮忙翻译，以下是您需要翻译的内容：

我有这段HTML代码：

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

相应的CSS是：

ul li:hover {
    color: red;
}

这样可以让两个 li 被悬停并更改它们的颜色。但如果我想要其中一个是 disabled，我会使用以下代码：

.disabled {
    color: grey;
}

但是另一个CSS代码中的 hover 伪类仍然生效。有没有办法覆盖它？

- Abhishek

Answer 1

由于CSS特异性，第一个规则具有更高的优先级。

将第二个规则更改为：

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

- Ruxta

---

使用 !important 可能会带来麻烦，@程序员的方法是更好的选择。 - irama

如果该项始终应该是灰色而不仅仅在悬停时，请使用以下代码：http://fiddle.jshell.net/88Z5Q/1/ - Jon P

我发现使用类似于ul li:not(.disabled):hover{color:red}这样的代码是值得的。这将使得所有没有添加.disabled类的li元素都应用悬停效果。 - Abhishek

相关说明： "text-decoration" 无法被覆盖。- https://dev59.com/-G855IYBdhLWcg3wMRRW - Curtis Yallop

Answer 2

将您的 CSS 更改为：

ul li:hover{
    color:red;
}

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

查看这个示例

在2020年代进行更新，您现在可以充分利用:not。

.disabled {
    color:grey;
}

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

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

- Jon P

Answer 3

你只需要更改你的CSS：

ul li:hover{ color:red; }

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

你需要禁用悬停效果，所以将其颜色设置为未悬停时的颜色。

- user529649

Answer 4

.disabled{
    color:grey !important;
}

- hazzik

---

尽可能避免使用!important，因为它可能导致维护问题。 - joshnh

我同意...虽然这确实修复了示例，但开发案例需要更多的技巧... - Abhishek

为什么应该避免这个？你能给我一个带有描述的链接吗？ - hazzik

在大型项目中，您可能会遇到一个球形泥巴，每个人都试图覆盖样式。使用!important是具有不良结构的CSS的标志。首先，他们尝试使用更长的选择器，最后你会有一堆!important语句。因此!important并不邪恶，但它表明您的CSS结构不良。查看OOCSS和这个博客：http://www.stubbornella.org/，了解如何构建可扩展的CSS。 - Andreas Köberle

Answer 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 */

- Matt Roy

Answer 6

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

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

当列表未被禁用时，这将导致应用红色颜色。

- Madhukar Upadhyay

---

:active 表示“被点击时”（大概）而不是“未被禁用时”。 - Quentin

Answer 7

如果只需要每次都是灰色，最小化代码，不需要在.disabled上使用:hover

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

或者为了快速更新，使用!important：

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

- Denis Chenu