CSS: Why do I have a red underline on image links when hovered?

Question

On my web site, I have the following CSS:

a:hover{color:red;border-bottom:1px solid}

This displays a red underline on text links when hovered, which is desired.

However, this also displays a red underline on image links when hovered, which is NOT desired.

I only want to display the red underline on text links when hovered but not image links when hovered.

Any ideas how I could accomplish this with CSS?

Answer 1

Because the style is probably applies to the anchor elements and its applying the style to the image links as well

a { border-bottom:1px solid red}

would also apply to

<a href="somelink"> <img src="someimage.jpg"> </a>

Answer 2

Seeing as the :hover text colour is almost red, why not just use text-decoration: underline?

Failing that, either have a textlink class and set the border property, a.textlink { border-bottom: 1px solid red }, or have an imglink class and clear the border property, a.imglink { border-bottom: none; }

Answer 3

You are styling the links with

border-bottom:1px solid red

It might be better to instead use

color: red;
text-decoration: underline;

as images cannot be underlined.

Answer 4

You have two options.

The first option is to do a { color: red; text-decoration: underline; }. This has the downside of changing the text to a red colour, not just the line. If that's acceptable, this is the easiest way.

If you need the text to stay whatever colour it normally is, things are a bit more complicated. There's no way with CSS to say "apply this rule unless there's an image tag within the link", so you're somewhat stuck. What I've always done is manually (or in your CMS, if it's something automatic) add a class to links that contain images - <a href="#" class="imagelink"><img src="#" alt="" /></a> - and remove the border from those.

Also note that you'll want to set a one pixel transparent border on non-hovered links, or the page'll jump around a little due to one pixel being added/subtracted to the height of the line containing the link.

Answer 5

I'm pretty sure that this cannot be done with CSS alone (I'm thinking that maybe some CSS pseudo-selectors can do the trick, only if we are talking about thumbnail images linking to their larger versions) but if you are already using jQuery in your page, it may be done with pretty much one line of code:

$('a img').each(function(){$(this.parentNode).addClass('image-link')});

and do not forget to add the correspondent class in your CSS:

a.image-link{ border:none;}

And that's it.