Alison Dyer Alison Dyer - 10 days ago 4
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.

Comments