Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Mar 2010
    Thanked 0 Times in 0 Posts

    image rollover to change a text & padding color?

    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.


  2. #2
    Senior Coder
    Join Date
    Jun 2008
    New Jersey
    Thanked 259 Times in 256 Posts
    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.


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts