css - hovering visited link has no background color-CodePudding

When I hover over a visited link the color changes correctly, but the background color doesn't. I noticed that this can be fixed by setting a background color for the a, but why is it like that?

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" >Link 1, without inital bg</a>
<br/>
<a href="https://stackoverflow.com" >Link 2, with initial bg</a>

CodePudding user response：

There is a explanation for this situation :

You can only use :visited to change those properties if the link already has them in the “unvisited” or :link state. You can’t use it to add properties that aren’t already present on the link. For example: You can change the background-color of a :visited link if the link element already had a background color. You can’t add a background-color to a :visited link if it did not have a background color when it was an “unvisited” link.

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

CodePudding user response：

I think it's a bug in CSS :) as it will have background if the a has a background in the normal case. So you need to set a background color for it with #fff if it's white or the color of the background.