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伪类仍然有效。有什么方法可以覆盖这个吗？

Answer 1

第一条规则因CSS特异性而覆盖它，即它更具体。

http://www.htmldog.com/guides/cssadvanced/specificity/

将第二条规则更改为：

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

Answer 2

将CSS更改为：

ul li:hover{
    color:red;
}

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

See this fiddle

Answer 3

你只需要改变你的CSS：

ul li：hover {       红色; }

ul li.disabled，ul li.disabled：hover {       颜色：灰色; }

您必须禁用悬停效果，因此您可以为其提供与未悬停时相同的颜色。

Answer 4

.disabled{
    color:grey !important;
}

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

Answer 6

最低，如果每次只需要灰色，则无需：将鼠标悬停在.disabled

上

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

或者对于速度更新，请使用！important：

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

Answer 7

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

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

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

如何覆盖CSS：悬停？

7 个答案: