覆盖 a:hover 样式与普通样式相同？答案

【问题标题】：Override a:hover style to be the same as normal style?覆盖 a:hover 样式与普通样式相同？
【发布时间】：2016-11-18 05:16:45
【问题描述】：

我有一个链接：

a - 背景颜色：红色；
a:hover - 背景颜色：绿色；

我现在正在创建一个新的全局类“已禁用”，以在此处和其他链接（使用其他背景颜色）中应用：

a.disabled - 不透明度：0.7；（所以在最初的例子中，它显示背景为红色，不透明度为 0.7）
a.disabled:hover - 与 a.disabled 相同；（初始示例应显示背景 red，不透明度为 0.7）

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

我很难找到一个可以作为全局类工作的解决方案（显然，如果我设置 a.disabled:hover background-color: red 就可以了）。

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 类？

【问题讨论】：

标签： html css

【解决方案1】：

有一个办法：

a.disabled{
  pointer-events:none;
}

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

编辑：

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

a:not(.disabled):hover

并删除.disabled:hover

（或）

如果您希望 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>

【讨论】：

这很聪明！从来没想过用那个。我会等待更多的答案，因为这有禁用指针事件的问题，这意味着如果你尝试类似 cursor: not-allowed 在 .disabled 类上它不会工作。
使用 a:not(.disabled):hover 需要我做我试图避免的事情：a:not(.disabled):hover, a--myBlueLink:not(.disabled ):hover 和 a--myYellowLink:not(.disabled):hover。它有效，但给我带来了同样的麻烦，即为我的蓝色、红色和黄色链接创建 3 个不同的禁用类。我从您的编辑中得知，没有任何方法可以“取消” background-color: green 指令，我们必须“解决”它？
所有链接都没有悬停的背景颜色吗？
没有。这就是他们之间的区别。我有背景颜色为红色、蓝色或黄色的链接。它们之间也有不同的悬停背景颜色。禁用时，它们应显示不透明度为 0.7 的默认颜色，并且基本上不会呈现更改背景颜色的“悬停”效果。同样在 disabled 我有一个 cursor: not-allowed 但我没有在我最初的问题中提到这一点，所以我不会因此而使接受正确答案无效。
如果您希望 css 通用，您可能必须更改结构。我添加了一个片段

【解决方案2】：

根据 CSS 规范的初始值为：

每个属性都有一个初始值，在属性的定义表。如果该财产不是继承财产，并且级联不产生值，则指定值该属性是它的初始值。

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

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

与您的预期输出不同。

但是你可以用其他方式来做。你能试试这个CSS。希望它会有所帮助。

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

.disabled:hover {
    opacity: 0.7;
}

【讨论】：