SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru XraySierra's Avatar
    Join Date
    Jan 2002
    Location
    Ontario, Canada
    Posts
    850
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question :hover border on links but NOT images possible???

    On my personal website (http://chrisblackwell.org) I made all my links have a border-bottom: 1px on a:hover instead of text-decoration because I like the way I can control the padding this way.

    The big HOWEVER with this method is that all my images that have links also get this property. I've tried the following variations but nothing seems to turn off the border on the hover over state:
    Code CSS:
    a:hover img { border: 0; }
    img a:hover { border: 0; }
    a:hover img { border: 0; !important }
    a:hover > img { border: 0; }

    If anyone has any idea on how to fix this without putting a class on each image I would be very grateful.
    Chris Blackwell - my blog and ramblings
    Comicville - Daily News and Comic Reviews

    "web development is what I love...so that's what I do"


  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    There is no point in addressing the image because you put the border on the anchor . The image doesn't have a border

    You could use JS to find parents of images that are links and adjust the class or you could try the negative margin bottom trick as shown by Erik in this thread:

    http://www.sitepoint.com/forums/show...=border+images

    That's about the only solutions other than adding classes as required.

  3. #3
    SitePoint Guru XraySierra's Avatar
    Join Date
    Jan 2002
    Location
    Ontario, Canada
    Posts
    850
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Shoot, I was afraid that was the case. This seems like something that should be added to CSS3, or is it? The ability to target sub-items from within a parent selector
    Chris Blackwell - my blog and ramblings
    Comicville - Daily News and Comic Reviews

    "web development is what I love...so that's what I do"


  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by XraySierra View Post
    On my personal website (http://chrisblackwell.org) I made all my links have a border-bottom: 1px on a:hover instead of text-decoration because I like the way I can control the padding this way.

    The big HOWEVER with this method is that all my images that have links also get this property. I've tried the following variations but nothing seems to turn off the border on the hover over state:
    Code CSS:
    a:hover img { border: 0; }
    img a:hover { border: 0; }
    a:hover img { border: 0; !important }
    a:hover > img { border: 0; }

    If anyone has any idea on how to fix this without putting a class on each image I would be very grateful.
    There is no way to achieve this by CSS alone, without a bit of hackery.

    If each link only contains images or text, you can solve it by putting a class on the links that contain images (or text, whichever you have fewer of).

    If some links contain text and an image, you can wrap a <span> round the text and style that rather than the link itself.

    If you don't want to do either of those and your images don't have a transparent background, you can use position:relative; to shift them downwards so that they overlap the border and hide it. If you don't want to actually move the images, you can use padding and set a background-color on the images to simulate the effect.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by XraySierra View Post
    This seems like something that should be added to CSS3, or is it? The ability to target sub-items from within a parent selector
    It's been on many wish lists but apparently it would be too code intensive and hamper the cascade (like trying to make some of the waterfall go back uphill ).


Bookmarks

Posting Permissions

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