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

あなたは1つにぶつかったように見えるかもしれません。

于 2014-11-17T21:12:49.537 に答える