Question

我有一个链接：

a - background-color：red;
a：悬停 - 背景颜色：绿色;

我现在正在创建一个新的全局类'禁用'，以便在此处以及其他链接（使用其他背景颜色）中执行此操作：

a.disabled - 不透明度：0.7; （因此在最初的例子中，它显示背景红色，不透明度为0.7）
a.disabled：悬停 - 与a.disabled相同; （初始示例应显示背景红色，不透明度为0.7）

基本上禁用的类也会禁用更改背景颜色的“悬停”效果。

我很难找到一个可以作为全局类的解决方案（显然如果我设置了a.disabled：悬停背景颜色：红色它可以工作）。

a {
  display: inline-block;
  width: 300px;
  height: 100px;
  background-color: red;
  border: 1px solid gray;
}

a:hover {
  background-color: green;
}

.disabled {
  opacity: 0.7;
}

.disabled:hover {
  opacity: 0.7;
  background-color: initial;
}

<a href="#">click me</a>
<a href="#" class="disabled">disabled me</a>

主要问题在于：

.disabled:hover {
  opacity: 0.7;
  background-color: initial;
}

因为我无法弄清楚背景颜色的值，它基本上只是“空白”背景颜色：绿色指令。

再次：我知道将它设置为'红色'有效。但我有蓝色和黄色背景颜色的其他链接，在这种情况下，它将无法正常工作。

是否有任何聪明的全球方式来实现这一点，或者我只需要为我的“蓝色，红色和黄色”链接创建不同的.disabled类？

Answer 1

有一种方法：

a.disabled{
  pointer-events:none;
}

实际上，它不仅仅是保留其背景，它还会禁用点击事件

修改

为防止悬停，您的a:hover应更改为：

a:not(.disabled):hover

然后移除.disabled:hover

（OR）

如果你想让CSS很常见，你似乎必须改变结构：我无法想到其他任何方式：

.linkBlue:hover{ background-color:blue; } .linkRed:hover{ background-color:red; } .linkYellow:hover{ background-color:yellow; } .linkGreen:hover{ background-color:green; } .disabled{ cursor:not-allowed; } .disabled a { pointer-events:none; }

<a class="linkBlue">Link1</a> <span class='disabled'><a class="linkRed">Link1</a></span> <a class="linkYellow">Link1</a> <span class='disabled'><a class="linkGreen">Link1</a></span>

Answer 2

根据CSS规范的初始值是：

每个属性都有一个初始值，在属性中定义定义表。如果属性不是继承属性，则级联不会产生值，然后是指定的值该属性是其初始值。

background-color属性的初始值是透明的。这就是

的原因

.disabled:hover {
  background-color: initial;
}

与您的预期输出不同。

但你可以用其他方式做到这一点。你能试试这个CSS吗？希望它会有所帮助。

a:not(.disabled):hover {
    background-color: green;
}

.disabled:hover {
    opacity: 0.7;
}

覆盖a：悬停样式与普通样式相同？

2 个答案: