Geek Answers Handbook

How can I put CSS overlay on another tag?

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 hang over the span? If so, how can I do this?

+4
source share
5 answers

There seems to be no selector for sibling the previous ones .

W3 defines neighboring siblings , and some browser support seems to be available for common siblings - but both are intended for the following siblings.

So, I think it will be easier for you to do with :hover installed in the div.

And I never heard that CSS is able to change the src attribute. The only way I can think of what can work on changing the image via CSS is to src transparent image and change the 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>
+8
source

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

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

Then you just need CSS to fit the background image and probably to add enough indentation for the background image so as not to overlap any text.

+2
source

You can also put an image within a range:

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

Then your css will be:

 .myLabel span:hover img { ... }

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

+1
source

No, you cannot in any way replace the value of the src attribute.

Jonathan Lanowski said: And I've never heard that CSS is able to change the src attribute. The only way I can think that I can change the image through CSS is to src a transparent image and change the background image.

Remember the value of the IMG element. It should show the image as content, not a presentation. If you put a transparent .gif or something in the src attribute, you will also remove the content from the page.

The same applies to using different CSS-hover methods to change the image, you still delete the content until you have the actual image in the src attribute. In addition, you will not be able to change the image while the span element hangs until your document is marked as it is.

So this is a typical Javascript job.

+1
source

one method is to have one image file with several images in it, and you use css rules to change the offset in the file to be displayed.

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

in particular the Hovers section.

Here is a functional example:

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

EDIT: I just realized that you asked to change the image, and then hover over the span , not the image. For this, I believe that you will need to use javascript.

0
source

More articles:


All Articles