Question

This may be a simple question but I can’t seem to get my head around to getting it working.
here is the basic set up (I missed out all the positioning etc as it isn’t relevant):

<div id="wrapper">
<img class="album-pic-exit" src="images/exit.jpeg"> 
<img class="album-pic" src="images/blank.gif">
</div>

#wrapper.album-pic-exit { display:none; } 
#wrapper.album-pic:hover +.album-pic-exit { display:block }

Basically when the cursor hovers over “album-pic” the “album-pic-exit” appears. I managed to make this work by having the “..exit” be a non-repeat background on hover but, I think thats unclean and surely there must be an easier more straight forward solution. I am relatively new to this but i believe I work better by looking and experimenting myself rather than resorting to google so my bad if the syntax is all wrong. p.s I would preferably want a walkthrough solution of css rather than javascript or jquery.

Answer 1

You can do it this way; however, you will have to switch the order of the two images, like this:

<div id="wrapper">
  <img class="album-pic" src="images/blank.gif">
  <img class="album-pic-exit" src="images/exit.jpeg">
</div>

Then use this CSS:

.album-pic-exit {
  display: none;
}
.album-pic:hover + .album-pic-exit {
  display: inline;
}

First, we hide the exit image with display: none. Then, we use the adjacent sibling selector + to select the exit image when the other image is being hovered over.