CSS- target text links with bottom border on hover, but image links with no border

Question

I\'d like to be able to target text links in CSS with border-bottom on hover, but have all links that are images not have a border on hover. So:

Answer 1

As far as JavaScript goes, I’d suggest using jQuery to add a class to all links that contain an image:

$('#sidebar a:has(img)').addClass('image-link');

(The :has selector is a jQuery thing; it isn’t present in CSS.)

Then adjust your stylesheet accordingly.

#sidebar a:hover {
  border-bottom: 1px dotted red;
}
#sidebar a.image-link:hover {
  border-bottom: none;
}

Answer 2

This actually seems to be a pretty difficult problem. Do you have any ability to change the CMS's code? It becomes easy if you can do something like wrap a <span> around any text inside links (and leave images outside of those). Then all you have to do is target #sidebar a:hover span to have the border.

If you can't change the code, I'm not sure if this is possible. I sure can't come up with anything.

Answer 3

You can't target an element depending on what child elements it has, so you would have to add something to the code to target the different links.

Can't you use underline instead of a bottom border? That would work as it's applied to the text in the link rather than the link element itself.

#sidebar a:hover { text-decoration: underline; }
#sidebar a:hover img { text-decoration: none; }

Answer 4

This might work

a img {position:relative; top: Npx}, where N is the hover border thickness

This would make the image cover the border, although it would be displaced downwards a pixel or so permanently.

Answer 5

The easy way is to use

:hover (text-decoration: underline}

Also see

text-underline-position  

http://dev.w3.org/csswg/css3-text/#text-underline-position0

Answer 6

Its possible with css3 using a:not(img) a:hover {style:whatever;} , but there are considerations. Here is an explanation with images: http://nerdinprogress.blogspot.com/2010/11/target-text-links-but-not-images-with.html