I Want To Make The :Visited State of a Linkable Div An Image, Is This Possible?

Question

I want to make the :visited state of a linkable div an image, I have tried to make it so that the :visited state of the div goes from having a white background color to the background image in question, but this doesn't seem to work.

The background image I want the :visited state of #gridone to be:

I'm having a hard time finding how to do this online, and I'm wondering if it's even possible to do.

I want each div within the grid to have a specific image for its :visited state. I'm currently experimenting #gridone to see if this is possible, by replacing the background color with a background image in its :visited state, however it doesn't seem to work. Are there other approaches to this that can make this happen? Am I attempting this incorrectly? Thank you for any help in advance.

#gallery {
  background-color: blue;
  height: 1400px;
  width: 100%;
}
#gallery a{
  color: white;
}
#gallerytext {
  width: 900px;
  margin: auto;
  padding-top: 30px;
}
#grid {
  margin: auto;
  width: 830px;
}
#gridone {
  background-color: white;
  color: blue;
  display: block;
  float: left;
  height: 200px;
  padding-top: 20px;
  padding-left: 25px;
  width: 400px;
}
#gridone:visited {
  background-image: url("images/galleryimageone.jpg");
  color: red;
  display: block;
  float: left;
  height: 200px;
  padding-top: 20px;
  padding-left: 25px;
  width: 400px;
}
#gridtwo {
  background-color: white;
  color: blue;
  display: block;
  float: right;
  height: 200px;
  padding-top: 20px;
  padding-left: 25px;
  width: 400px;
}
#gridthree {
  background-color: white;
  color: blue;
  display: block;
  float: left;
  height: 200px;
  margin-top: 30px;
  padding-top: 20px;
  padding-left: 25px;
  width: 400px;
}
#gridfour {
  background-color: white;
  color: blue;
  display: block;
  float: right;
  height: 200px;
  margin-top: 30px;
  padding-top: 20px;
  padding-left: 25px;
  width: 400px;
}
#gridfive {
  background-color: white;
  color: blue;
  display: block;
  float: right;
  height: 200px;
  margin-top: 30px;
  padding-top: 20px;
  padding-left: 25px;
  width: 400px;
}
#gridsix {
  background-color: white;
  color: blue;
  display: block;
  float: left;
  height: 200px;
  margin-top: 30px;
  padding-top: 20px;
  padding-left: 25px;
  width: 400px;
}

<div id="gallery">
      <div id="gallerytext">
        <p>The Gallery</p>
        <p>This website is showcases the incredible work of influential women artists from the past and present.</p>
      <div id="grid">
        <a href="http://google.com">
          <div id="gridone">
             The Dinner Party<br>
             Judy Chicago
          </div>
        </a>
        <a href="http://google.com">
          <div id="gridtwo">
             A Subtlety<br>
             Kara Walker
          </div>
        </a>
        <a href="http://google.com">
          <div id="gridthree">
             Alma Silueta en Fuego<br>
             Ana Mendieta
          </div>
        </a>
        <a href="http://google.com">
          <div id="gridfour">
             Black Iris<br>
             Georgia O'Keeffe
          </div>
        </a>
        <a href="http://google.com">
          <div id="gridfive">
             The Two Fridas<br>
             Frida Kahlo
          </div>
        </a>
        <a href="http://google.com">
          <div id="gridsix">
             Judith Slaying Holofernes<br>
             Artemesia Gentileschi
          </div>
        </a>
      </div>

score 2 · Accepted Answer · edited May 23 '17 at 12:30

The problem here is that it's not the <div> that gets the visited state - it's the <a> that encloses it. So to target #gridone within a visited anchor tag, you'd want the CSS selector:

a:visited #gridone

Here's an updated (slightly trimmed) snippet with the selector in place:

#gallery {
  background-color: blue;
  height: 1400px;
  width: 100%;
}
#gallery a {
  color: white;
}
#gallerytext {
  width: 900px;
  margin: auto;
  padding-top: 30px;
}
#grid {
  margin: auto;
  width: 830px;
}
#gridone {
  background-color: white;
  color: blue;
  display: block;
  float: left;
  height: 200px;
  padding-top: 20px;
  padding-left: 25px;
  width: 400px;
}
a:visited #gridone {
  background-image: url("images/galleryimageone.jpg");
  color: red;
  display: block;
  float: left;
  height: 200px;
  padding-top: 20px;
  padding-left: 25px;
  width: 400px;
}

<div id="gallery">
  <div id="gallerytext">
    <p>The Gallery</p>
    <p>This website is showcases the incredible work of influential women artists from the past and present.</p>
    <div id="grid">
      <a href="http://google.com">
        <div id="gridone">
          The Dinner Party
          <br>Judy Chicago
        </div>
      </a>
    </div>
  </div>
</div>

Note: Attempting to use CSS to affect the background-image in conjunction with the :visited selector is actually prevented by most browsers' security restrictions. (See background-image: for :visited links?). If it's a requirement that specifically the background image be changed, you will need to rely on something like JavaScript for this.

Hope this helps! Let me know if you have any questions.

Thank you for explaining this. I am wondering though, the way I currently have it set up is that the entire div acts as a link. I want that white box to become an image once its been visited, but even having changed this, while the text does become red, the background does not change to an image. How can I apply this so it changes to an image as well? — Alison Dyer, Nov 23 '16 at 21:35
@AlisonDyer Ahhh. Did some further research, and apparently, you specifically can't change the background image of link in response to a visited event. (See [background-image: for :visited links?](http://stackoverflow.com/questions/14202856/background-image-for-visited-links). This is something browsers go out of their way to prevent, so the user's privacy is protected. You can swap out colours or other background attributes, but not the image itself. So the most logical approach won't actually work here. — Serlite, Nov 23 '16 at 22:07
@AlisonDyer Unfortunately, if it's imperative that you change the background image after a link is visited (and not just some other visual attributes), you're going to need to use something like JavaScript to sidestep this restriction. — Serlite, Nov 23 '16 at 22:21
Thank you Serlite for that information! I really appreciate it. I will do some research into that myself. — Alison Dyer, Nov 24 '16 at 03:17

score 2 · Answer 2 · answered Nov 23 '16 at 20:21

2

:visited only works on <a> tags (because they are links you can "visit" whereas <div>s are not). See here and here for some more detail.

Try using :visited a on the parent anchor tag:

a:visited #gridone

answered Nov 23 '16 at 20:21

jcuenod

55,835
14
65
102

I Want To Make The :Visited State of a Linkable Div An Image, Is This Possible?

2 Answers2