How can I have a CSS hover affect a different tag?

Question

Let's say I have the following:

<style>
    .myLabel { color: blue;}
    .myLabel:hover {color:red;}
</style>
<div>
    <img src='myimage.png' />
    <span class='myLabel'>Image Label</span>
</div>

Is it possible to replace the image (also via css) when they hover over the span? If so, how could I do that?

Answer 1

one technique is to have a single image file have multiple images in it and you use css rules to change the offset within the file to show.

see: http://www.alistapart.com/articles/sprites/

specifically the "Hovers" section.

They offer a functional example here:

http://www.alistapart.com/d/sprites/ala-image3.html

EDIT: I just realized that you asked to make the image change then the hover over the span not the image itself. To do that, I believe you would need to use javascript.

Answer 2

There don't seem to be any sibling selector for previous siblings.

W3 defined adjacent siblings and some browser support seems to be available for general siblings -- but, both are for following sibling(s).

So, I think you'll find it easier to accomplish with :hover set to the div.

And, I've never heard of CSS being capable of altering a src attribute. About the only way I can think that might work to alter an image via CSS is to have src a transparent image and alter background-image.

<style>
    .myLabel img { background-image: url('...'); }
    .myLabel span { color: blue; }
    .myLabel:hover img { background-image: url('...'); }
    .myLabel:hover span { color:red; }
</style>
<div class='myLabel'>
    <img src='transparent.png' />
    <span>Image Label</span>
</div>

Answer 3

You could also put the image inside the span:

<div class='myLabel'>
    <span>
      <img src='transparent.png' />
      Image Label
    </span>
</div>

Then your css would be:

.myLabel span:hover img { ... }

FYI Only <a> tags work with :hover in IE6 (but it's old anyway)

Answer 4

An easier way to do this would be to remove the img element and make the image a background image on the span. Then you can control the background image in your two CSS rules:

.myLabel { color: blue; background-image:url(myimage.png) }
.myLabel:hover {color:red; background-image:url(myotherimage.png) }

Then you just need some CSS to position the background image, and probably to add enough padding for the background image to not overlap any text.

Answer 5

No, you can not replace the value of the src-attribute in any way.

Jonathan Lanowski Said: And, I've never heard of CSS being capable of altering a src attribute. About the only way I can think that might work to alter an image via CSS is to have src a transparent image and alter background-image.

Keep the meaning of the IMG-element in mind. It's supposed to show an image as content, not presentation. If you put a transparent .gif or whatever in the src-attribute, you also remove content from the page.

The same applies to using different CSS-hover-techniques to change the image, you still remove the content as long as you don't have an actual image in the src-attribute. Plus, you won't be able to change the image while hovering the span-element as long as your document is marked up the way it is.

So then, this is a typical Javascript-job.