How to use CSS rollover for multiple background images

Question

Have an image rollover for the background image and since I have several images, I would like to know how to reuse the same #Rollover for multiple images ?

<div id="leftprod"><a href="product.php" id="myRollover" ></a></div>


#Rollover {
 background-image: url('images/mood160-1.jpg');
 width: 160px;
 height:207px;

 position: absolute;

}

#Rollover:hover {
 background-image: url('images/mood160-2.jpg');
 width: 160px;
 height:207px;
 border: solid 0px #676767;

}

Answer 1

At the moment you have <a id="Rollover">

Change it to use classes instead of an ID like this

<a class="rollover">

And then you can use this CSS:

.rollover:hover {
 background-image: url('images/mood160-2.jpg');
 width: 160px;
 height:207px;
 border: solid 0px #676767;
}

This will apply the rollover to anything that has a class of rollover

The main difference bteween IDs and classes is you should only use an ID once, as you want to apply a rollover affect to multiple elements, you should use a class.

Answer 2

Simple we need to change the image id every time the image loaded:

<img src="images/icons/button_cancelled_gray.jpg" 
     border="0" 
     id="Image1<?php echo $i +=1; ?>" 
     onMouseOver="MM_swapImage('Image1<?php echo $k +=1; ?>','','images/icons/button_cancelled.jpg',1)" 
     onMouseOut="MM_swapImgRestore()"
/>

So I add a PHP counter with the help of which, but remember I have wrote Image1 it is for defining image separately, if you use another image simply change it to Image2 , similarly play with your counter don't use same variable again again, as it will change the id's which have to be similar, or it will make multiple same id which have to be different.

Answer 3

You would typically create a parent element that contains the various images, then have styles like this:

#Parent:hover #Rollover1 { background-image: ... }
#Parent:hover #Rollover2 { background-image: ... }

This lets you change the rollver when the entire group is hovered over.

Answer 4

Change it to a class instead and apply it as class="Rollover" to all of the images you want to be like this.

.Rollover {
    ...
}

rather than

#Rollover

Answer 5

Use class instead of id and add class="Rollover" in all images.

change #Rollover to .Rollover in your css

Read this nice article:

• The Difference Between ID and Class