html – Picture is not displayed in a.menu:visited in CSS

Question:

On hover, focus, visited, activate and pseudo-selector, the link should render the picture. Visited doesn't work. I don’t know what is the reason. It seems that statistical pseudo-selectors go to dynamic ones (according to the rule).

a.menu:link {
  background: #fff url("4.png") center right no-repeat;
}
a.menu:visited {
  background: #fff url("2.png") center right no-repeat;
}
a.menu:hover {
  background: #fff url("1.png") center right no-repeat;
}
a.menu:focus:hover {
  background: #fff url("3.png") center right no-repeat;
}
a.menu:active:hover {
  background: #fff url("5.png") center right no-repeat;
}
a {
  text-decoration: none;
  font-size: 30px;
  padding-right: 25px;
  padding-left: 15px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" http-equiv="Content-Type" content="text/html">
  <link href="style2.css" type="text/css">
  <title></title>

</head>

<body>

  <a href="#" id="lar" class="menu">Головна</a>
  <a href="#" class="menu">Автор</a>
  <a href="#" class="menu">Новини</a>
  <a href="#" class="menu">Ресурси</a>

</body>

</html>

Answer:

Most browser developers avoid using background-images in links with the: visited pseudo-class because they consider it to be a violation of user privacy.

Scroll to Top