Question

I would like a CSS hover affect for multiple links that affect the same image. If you look at this example site I have Repair, Sales, Upgrades and Data Recovery links. When you hover over any one of them I would like the image to their left to change. You can hover over the image currently there to see what I mean.

website: http://ctuchicago.squarespace.com/

Answer 1

I would create a box that contains the image and all of the links. Then when the box is hovered over the image will change. This doesn’t get you exactly what you want – which is only hovering over the link changes the image, but I think it is close enough and far easier.

http://jsfiddle.net/mrtsherman/D5ZRs/

div:hover img { background: url('blah'); }

<div> 
  <img src="" />
  <a href="">Repair</a>
  <a href="">Sales</a>
</div>