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 what's even worse, if I have transparent images, the link's background color can be seen through the image.

I have stumbled upon this problem many times before, but I always solved it using the quick-and-dirty approach of assigning a class to image links:

a.imagelink:hover { background-color: transparent; }

Today I was looking for a more elegant solution to this problem when I stumbled upon this.

Basically what it suggests is using display: block, and this really solves the problem for non-transparent images. However, it results in another problem: now the link is as wide as the paragraph, although the image is not.

Is there a nice way to solve this problem, or do I have to use the dirty approach again?

Thanks,

Answer 1

Untested idea:

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

Answer 2

The following should work (untested):

First you

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

Then you

a:imagelink:hover { background-color: inherit; }

The second rule will override the first for <a class="imagelink" etc.> and preserve the background color of the parent.

I tried to do this without the class="", but I can't find a CSS selector that is the opposite of foo > bar, which styles a bar when it is the child of a foo. You would want to style the foo when it has a child of class bar. You can do that and even fancier things with jQuery, but that may not be desirable as a general technique.

Answer 3

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 4

I'm confused at what you are terming "image links"... is that an 'img' tag inside of an anchor? Or are you setting the image in CSS?

If you're setting the image in CSS, then there is no problem here (since you're already able to target it)... so I must assume you mean:

<a ...><img src="..." /></a>

To which, I would suggest that you specify a background color on the image... So, assuming the container it's in should be white...

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

Answer 5

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