SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    Awesome Addict
    Join Date
    Mar 2004
    Location
    Toronto, Canada
    Posts
    326
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Getting Rid of a:hover on Images

    Consider the following:

    Code:
    #content a { color: #28A1FE; text-decoration: none; }
    #content a:hover { background: #F1FCD8;  color: #28A1FE; font-weight: normal; }
    #content img a { border: none; }
    #content img a:hover { text-decoartion: none; }
    #content a and #content a:hover apply to all links on my site. I want to get rid of the hover state for images but the latter two rules aren't doing it. Any ideas?
    Please checkout www.sixminutes.ca .... See the buttons after each article that say "Comment - 0" or whatever? I want to eliminate the hover state here as well as on the sidebar. Try mousing over the site of the week image (IE doesn't provide a hover state but FF and Opera do) ... how do I get rid of the hover state (you'll notice a green border on the bottom) here?

    Any help appreciated ...

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

    For a start these two don't make sense (apart from the spelling mistake)
    Code:
    #content img a { border: none; }
    #content img a:hover { text-decoartion: none; }
    You are saying that all anchors that are nested inside an image tag will be styled ! I assume thats just a typo and you meant.
    Code:
    #content a img  { border: none; }
    #content a:hover img { text-decoration: none; }
    Now that means appply styles to the img that is nested in the appropriate anchor. So the first one will turn images borders off ok. The secon one will do nothing because the image doesn't have text-decoration anyway. Its the anchor that has the text decoration.

    You will need to add classes to the anchors surrounding your images and apply the styles explicitly to turn the text-decoration off, targetting the anchor and not the image.


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
  •