View Full Version : image rollover to change a text & padding color?

05-17-2010, 05:55 AM
Hi, I am looking for a little CSS help.

My site has a bunch of "badges," each of which contains an image with some borders & padding and a line of text underneath:


When the user rolls over the image, I would like to be able to change both the color of the padding (the 8 pixel dark gray border around the image), and the color of the text underneath the image.

If possible, I'd also like to make the rollover area the entire badge, not just the image, so that I don't need to use duplicate links for the image and the text underneath it.

Is this possible with my current HTML/CSS code?

Much thanks in advance for any help.


05-17-2010, 07:13 AM
First, for semantics sake, you need to change every badge from a id of badges to a class of badges. An id should be unique to an element.

While it won't work in every browser, you can set a :hover for the parent element and have it cascade down. So...

.badges:hover .imgborder {
border-color: #whatever

.badges:hover a {
color: #whatever

This'll make it so when you hover over the badge, it cascades down. Like I said before, it doesn't work perfectly in all browsers.

If you want to make the badge itself a link, just make it a link.

a.badges {
display: block;
the rest of your current css

A div is a block element used to arrange content. Any element can be turned into a block element. So just turn the badges elements from a div to a link then make it a block.