SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,873
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)

    How can I override a:hover so that images are not targeted?

    Hi,

    I would like the background colour of my links to change on hover.
    However, I don't want this effect on images. The background colour should not change when you hover over them.
    How can I achieve this?

    I tried targeting images like with a:hover img, but I still see a blue line along the bottom edge when I hover over them.

    Here's a bare-bones example to illustrate my problem:

    HTML Code:
    <!DOCTYPE HTML>
    <html dir="ltr" lang="de-DE">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Cat</title>
        <style>
          a:hover{background-color:#AFD6FF;}
          a:hover img{background-color:transparent;}
        </style>
      </head>
    
      <body>
        <p><a href="">Text</a></p>
        <a href="#" rel="lightbox[11]">
          <img src="http://www.petfinder.com/wp-content/uploads/2012/11/99059361-choose-cat-litter-632x475.jpg" />
        </a>
      </body>
    </html>
    Thanks in advance.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Just add this:

    Code:
    img {vertical-align: bottom;}
    By default, images align themselves to the baseline of any text they might end up sitting next to, which leaves space below them for the descenders of any letters (like the stick of a "p"). The code above aligns the image to the bottom of the descenders.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,873
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    Thank you Ralph, both for the fix and for the concise explanation.
    Suffice to say, that worked a treat.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You're welcome. That issue used to drive me bonkers, and I think img {vertical-align: bottom;} was pretty much the first thing I learned about in these forums, so I have a soft spot for it now.

    Thanks for posting such a clear working example. I wish everyone could do that!
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Enthusiast polyhedra's Avatar
    Join Date
    Nov 2011
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okey that works great and you don't see the hover on the image but it still is there. Mabye try being more specific on your selectors. Adding an ID to your link will make your CSS only target that link and not the image.

    HTML Code:
    <style>
          a#bgcolor:hover{background-color:#AFD6FF;}
     </style>
    
    <p><a id="bgcolor" href="">Text</a></p>

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    1) do note that vertical-align:top ; works just as well. Essentially you just want to align the image with its white space.


    Okey that works great and you don't see the hover on the image but it still is there. Mabye try being more specific on your selectors. Adding an ID to your link will make your CSS only target that link and not the image.
    Yes, it's true. The solution above works by getting rid of extraneous white space.

    This is why THINKING OUT your code is important. Let's break it down:

    a:hover{background-color:#AFD6FF; } will target the anchor element on hover. Any anchor element, and specifically THE anchor element, regardless of it's content. As selectors cascade DOWNWARDS you can select a (contained) tag based on it's container , but not the other way around.



    if you gave the anchor explicit dimensions which were lager than the image you will see the BG color is still there!

    so the solution is to code differently:

    1) TARGETING THE ANCHOR. We need to add a class to anchor containing images , and set the background to transparent there.
    a.image:hover{background-color:transparent; } (note am NOT targeting the IMG, as the IMG has no baring to the bg color of it's parent element. Note also that a class might be better suited than an ID , far less heavy handed and allowable to use elsewhere int the code.

    2) CHANGING THE SOURCE. Les desirable, but just as effective is to wrap all non IMG content of anchors in spans and then target via a:hover span. of course now you have to redo your markup and your CSS

    3) ralphs solution. but if your anchors are ALWAYS text OR imgs, and they shringk wrap what raplh suggested is quite adequate.


    Remember CSS is basically trickery. No solution is actually 'right' , it merely get the job done for that specific situation.. which is why situational thinking is important when coding.

  7. #7
    SitePoint Enthusiast polyhedra's Avatar
    Join Date
    Nov 2011
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks that was a good interesting read. Understanding that there are many different ways to go about CSS is important I agree. The more techniques you know the better "future proof" it will be. I like how you pointed out why setting a:hover img to transparent was not having an effect, haha I did not even notice.

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,873
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    Thank you dresden_phoenix, for taking the time to explain this in more depth.

    In my current situation, the images with the unnecessary hover background are part of an image gallery generated by Wordpress.
    It would be a pain in the neck to add an individual class name to them by hand, the same goes for wrapping them in a span.
    Also, if the client wants to add more images, this is an unnecessary step that is likely to confuse.
    Therefore I opted to use Ralph's solution. It is simple to implement and des exactly what I want.

    Quote Originally Posted by dresden_phoenix View Post
    Remember CSS is basically trickery. No solution is actually 'right' , it merely get the job done for that specific situation.. which is why situational thinking is important when coding.
    I like this quote

    Thanks again.

  9. #9
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by dresden
    1) do note that vertical-align:top ; works just as well. Essentially you just want to align the image with its white space.
    Anything other than its default "baseline" will do it.

    Quote Originally Posted by dresden
    Remember CSS is basically trickery.
    yup, 100%.


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
  •