Geek Answers Handbook

TV series style selector with: visited

I show an image element when the user hovers over a link - this works.

Now I would like to make this image always visible to the user when he returns to the site ... My attempt below was (I think) blocked due to restrictions on the selector: visited.

Is there a way around these limitations to make this method work? Is there any other selector that I can use for the same effect?

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;
}
Run codeHide result
+4
source share
2 answers

So we can do.

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" />
Run codeHide result

You can also do this using the attribute :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" />
Run codeHide result

Check it out from 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>
Run codeHide result
+2

More articles:


All Articles