How to change background-color on text links on hover but not image links

Question

I have a CSS rule like this:

a:hover { background-color: #fff; }

But this results in a bad-looking gap at the bottom on image links, and wh

Answer 1

I had this problem today, and used another solution than display: block thanks to the link by asker. This means I am able to retain the link ONLY on the image and not expand it to its container.

Images are inline, so they have space below them for lower part of letters like "y, j, g". This positions the images at baseline, but you can alter it if you have no <a>TEXT HERE</a> like with a logo. However you still need to mask the text line space and its easy if you use a plain color as background (eg in body or div#wrapper).

body {
  background-color: #112233; 
}
a:hover {
  background-color: red;
}
a img {
  border-style: none; /* not need for this solution, but removes borders around images which have a link */
  vertical-align: bottom; /* here */
}
a:hover img {
  background-color: #112233; /* MUST match the container background, or you arent masking the hover effect */
}

Answer 2

I tried to find some selector that would get only <a> elements that don't have <img> descendants, but couldn't find any... About images with that bottom gap, you could do the following:

a img{vertical-align:text-bottom;}

This should get rid of the background showing up behind the image, but may throw off the layout (by not much, though), so be careful.

For the transparent images, you should use a class.

I really hope that's solved in CSS3, by implementing a parent selector.

Answer 3

I had the same problem. In my case I am using the image as background. I did the following and it resolved my problem:

background-image: url(file:"use the same background image or color");

Answer 4

This way works way better.

a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] {
    text-decoration: none;
    border: 0 none;
    background-color: transparent;
    }

No cumbersome classes that have to be applied to each image. Detailed description here:

http://perishablepress.com/press/2008/10/14/css-remove-link-underlines-borders-linked-images/

Answer 5

you could use display: inline-block but that's not completely crossbrowser. IE6 and lower will have a problem with it.

I assume you have whitespaces between <a> and <img>? try removing that like this:

<a><img /></a>

Answer 6

I usually do something like this to remove the gap under images:

img {
  display: block;
  float: left;
}

Of course this is not always the ideal solution but it's fine in most situations.