Alison Dyer Alison Dyer - 7 months ago 31
CSS Question

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

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:
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>




Answer

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.