Question

我目前有以下CSS：

a.enabled:hover { background-color: #f9f9f9; border: 1px solid #ddd; }

代码：

<div><a class="enabled" ......>07</a></div>
<div><a class="enabled" ....... >08</a></div>
<div><a class="disabled" >09</a></div>
<div><a class="enabled" ...... >10</a></div>
<div><a class="enabled" .......>11</a></div>

当我将鼠标悬停在“已启用”链接上时，背景颜色会发生变化。当我将鼠标悬停在“禁用”链接上时，没有任何反应。

我想通过删除出现在这么多行（超过200行）上的所有class =“enabled”文本来减少页面大小。这样的事情。

后：

<div><a  ........>07</a></div>
<div><a  ....... >08</a></div>
<div><a class="disabled" >09</a></div>
<div><a  ...... >10</a></div>
<div><a  .......>11</a></div>

有没有办法用CSS做到这一点？如果链接处于“禁用”状态，我只希望悬停不改变背景颜色。

Answer 1

您将使用的选择器是

a:not(.disabled):hover { background-color: #f9f9f9; border: 1px solid #ddd; }

权衡是浏览器兼容性 - IE＆lt; 9不支持:not()。作为一种变通方法，您可以使用具有这两个规则的覆盖规则，如果您可以定义默认背景颜色：

a, a.disabled:hover { /* Default background and border */ }
a:hover { background-color: #f9f9f9; border: 1px solid #ddd; }

...或者只是坚持使用现有的.enabled和.disabled解决方案。

Answer 2

为a.disalbe添加css规则：hover，其颜色与您对

的默认颜色相同

a, a.disabled:hover { background-color: red; }
a:hover { background-color: green; }

demo in JsBin

Answer 3

尝试使用css :not选择器。

div a:not(.disabled):hover

Answer 4

您是否可以将样式应用于所有div a，然后在应用.disabled类时将其撤消？

像

这样的东西

a.disabled:hover { background-color: transparent; border: 1px solid transparent; }

Answer 5

 a.disabled:hover { background-color: red; border: 1px solid #ddd; }

你试过这个吗？或类似的东西：

a:hover { /* disabled-definitions */ }
a.enabled:hover { background-color: #f9f9f9; border: 1px solid #ddd; }

...然后你只在HTML中使用启用的类

我需要一个“如果我的类被禁用就不要这样做”的那种CSS选择器

5 个答案: