css -悬停访问链接没有背景色。

Question

当我在访问过的链接上悬停时，颜色会发生正确的变化，但背景色却不会。我注意到可以通过为a设置背景色来解决这个问题，但是为什么会这样呢？

​

a {
  text-decoration: none;
  color: inherit;
}

.link-1:visited,
.link-2:visited {
  color: violet;
}

.link-2 {
  background-color: yellow;
}

.link-1:visited:hover {
  color: cyan;
  background-color: orange;
}

.link-2:visited:hover {
  color: cyan;
  background-color: orange;
}

<a href="https://stackoverflow.com" class="link-1">Link 1, without inital bg</a>
<br/>
<a href="https://stackoverflow.com" class="link-2">Link 2, with initial bg</a>

​

Answer 1

对这种情况有一种解释：

如果链接已经处于“未访问”或:链接状态，则只能使用：

更改这些属性。您不能使用它来添加链接中尚未出现的属性。例如:如果链接元素已经具有背景色，则可以更改“访问”链接的背景色。如果访问链接是“未访问”链接时没有背景色，则不能向该链接添加背景色。

https://css-tricks.com/almanac/selectors/v/visited/

Answer 2

我认为这是CSS :)中的一个bug，因为如果a在正常情况下有背景，那么它就会有背景。因此，如果它是白色或背景颜色，则需要用#fff设置它的背景色。