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

HTML & CSS
1

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:

<!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

Just add this:

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. :slight_smile:

3

Thank you Ralph, both for the fix and for the concise explanation.
Suffice to say, that worked a treat.

4

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. :slight_smile:

Thanks for posting such a clear working example. I wish everyone could do that!

5

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.


<style>
      a#bgcolor:hover{background-color:#AFD6FF;}
 </style>

<p><a id="bgcolor" href="">Text</a></p>
6
  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

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.:stuck_out_tongue:

8

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.

I like this quote :slight_smile:

Thanks again.

9

Anything other than its default “baseline” will do it.

yup, 100%.