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:

<a href="#"><img src="image.png"  /></a>  ==> this should not have a bottom-border on hover
<a href="#">regular text link</a> ==> this should have a bottom-border on hover

I tried this CSS:

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

But this doesn't work...the anchor has to be targeted rather than the image, I think. I've been hunting around Google and no one seems to know how to do this except by targeting the image link with a specific class or id, or using display:block.

But, I can't use these solutions since the content is in a CMS so I don't want the user to have to assign a class to each image they insert. And display:block won't work because I don't know if that would be appropriate for every image the user wants to display.

Finally, I'd like to be able to do this in plain CSS (no Javascript). Perhaps there's no way...but any help or ideas you have would be greatly appreciated!

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

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; }