6

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

我现在想让用户在返回站点时始终可以看到该图像...由于对 :visited 选择器的限制，我在下面的尝试（我认为）失败了。

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

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;
}

4

2 回答 2

3

这样我们就可以做到。

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>

于 2014-11-17T22:05:04.510 回答
0

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

看起来你遇到了一个。

于 2014-11-17T21:12:49.537 回答