How to change the background color for text links on hover, but not for image links

Question

I have a CSS rule like this:

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

But this leads to a bad gap at the bottom of the image links, and even worse, if I have transparent images, the color of the link image can be seen through the image.

I have come across this problem many times, but I always solved it with a quick and dirty approach to class assignment for image links:

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

Today I was looking for a more elegant solution to this problem when I came across this .

Basically what he offers uses display: block , and it really solves the problem for opaque images. However, this leads to another problem: now the link is as wide as the paragraph, although the image is missing.

Is there a good way to solve this problem, or do I need to use a dirty approach again?

Thanks,

Answer 1

I tried to find some kind of selector that will receive only <a> tags that have no <img> descendants, but could not find ... About images with this lower gap you can do the following:

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

This should get rid of the background that appears behind the image, but it may discard the layout (although not so much), so be careful.

For transparent images, you should use a class.

I really hope this has been resolved in CSS3 by implementing the parent selector.

Answer 2

I am confused by what you call "image links" ... is this the "img" tag inside the anchor? Or do you set the image in CSS?

If you set the image in CSS, there is no problem (since you can already target) ... so I have to assume that you mean:

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

Why would I suggest specifying the background color on the image ... So, assuming that the container in it should be white ...

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

Answer 3

I usually do something like this to remove the space below the images:

 img { display: block; float: left; } 

Of course, this is not always an ideal solution, but in most cases this is normal.

Answer 4

This method works 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; } 

There are no bulky classes that need 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

Unconfirmed idea:

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

Answer 6

The following should work (unverified):

You first

  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 save the background color of the parent.

I tried to do this without class = "", but I cannot find a CSS selector that is the opposite of foo> bar, which styles the panel when it is a child of foo. Would you like to create a foo style if it has a child of a class. You can do this and even more interesting things with jQuery, but this may not be desirable as a common technique.

Answer 7

you can use display: inline-block, but not completely crossbrowser. IE6 and below will have problems with it.

I assume you have spaces between <a> and <img> ? try deleting it like this:

<a><img /></a>

Answer 8

I had this problem today and used a different solution than display: block , thanks to the link provided by the user. This means that I can save the link ONLY in the image and not expand it in my container.

Images are embedded, so they are located below them for the bottom of letters such as "y, j, g". This positions the images in baseline , but you can change it if you do not have <a>TEXT HERE</a> as with the logo . However, you still need to mask the text string space and easily if you use plain color as the background (for example, 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 9

I had the same problem. In my case, I use the image as the background. I did the following and it solved my problem:

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