Question

当用户将鼠标悬停在链接上时，我正在显示图像元素 - 这是有效的。

我现在想让用户在返回网站时始终可以看到该图片...由于对访问选择器的限制，我的下面尝试（我认为）被挫败了。

有没有办法解决这些限制以使此方法有效？我可以使用另一个选择器来达到同样的效果吗？

＆＃13;

a {
  text-decoration: underline;
  color: black;
}

#image {
  position: absolute;
  visibility: hidden;
  top: 30%;
  left: 60%;
}

a:visited {
  color: red;
}

a:visited + #image {
  visibility: visible;
}

a:hover{
  color: white;
  transition: color .3s ease;
}

a:hover + #image{
  visibility: visible;
}

＆＃13;

Answer 1

我们可以这样做。

a {
  text-decoration: underline;
  color: black;
}

#image {
  position: absolute;
  visibility: hidden;
  top: 30%;
  left: 60%;
}

a:visited {
  color: red;
}

a:visited + #image {
  visibility: visible;
}

a:hover {
  color: white;
  transition: color .3s ease;
}

a:hover + #image {
  visibility: visible;
}

<a href="#hello">Hello</a> - Click this to make it visited.
<img src="http://lorempixel.com/250/250/" alt="Image" id="image" />

您也可以使用:target属性。

这样做

a {
  text-decoration: underline;
  color: black;
}

#image {
  position: absolute;
  visibility: hidden;
  top: 30%;
  left: 60%;
}

a:visited {
  color: red;
}

#image:target {
  visibility: visible;
}

a:hover {
  color: white;
  transition: color .3s ease;
}

a:hover + #image {
  visibility: visible;
}

<a href="#hello">Hello</a> - Click this to make it visited.
<img src="http://lorempixel.com/250/250/" alt="Image" id="image" />

从MDN ...

中查看

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>:target pseudoclass example</title>
    <style>
      #hidden-element {
        display: none;
      }

      #hidden-element:target {
        display: block;
      }
    </style>

  </head>
  <body>
    <p><a href="#hidden-element">Show the Hidden Element</a></p>
    <div id="hidden-element">
      <p>You have unhided me!</p>
    </div>
  </body>
</html>

Answer 2

:visited选择器的样式有限制：https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector

看起来你似乎遇到了一个。

样式兄弟选择器与：访问

2 个答案: