HTML: remove a:hover for images?

Question

For text links, I have:

CSS:

a:link {color: #3366a9; text-decoration: none}
a:hover {border-bottom: 1px solid; color: black}

But this also adds a black underline on linkable IMGs that I do not want.

How do I remove the border-bottom on linkable IMGs when hovered using CSS?

I've tried the following:

a:hover img {border-bottom: 0px}

But that doesn't work

Live example (try to hover over the logo in top-left)

Answer 1

If you float your images vs. inline this will work and will require no modifications to image link attributes that Steve's answer requires.

a:hover img {
border: none !important;
display: block;
}

Answer 2

a:hover img {border-bottom: 0px;}

That should do the trick.

Answer 3

Not sure if this is the best solution, but it works:

    a:link {color: #3366a9; text-decoration: none}
    a:hover {border-bottom: 1px solid black; }

    .aimg:link {color: #3366a9; text-decoration: none}      
    .aimg:hover { border-bottom: none; }

Then set the anchors with images in them to the "aimg" class:

<a class="aimg" href="Test.htm"><img src="images/myimage.gif" /></a>

Answer 4

this worked for me also in IE. IE displayed the borders but with this it doesn't anymore.

a img {/*whatever you need*/
border: none !important;
}
a img:hover{/*whatever you need*/
}

Answer 5

Found this example here: https://perishablepress.com/css-remove-link-underlines-borders-linked-images/

a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] {
    text-decoration: none;
    border: 0 none;
    }

This is exactly what you want I suppose.
Works perfect in Firefox, removes all effects from the link, which contains an image of given formats.

Answer 6

I used jQuery to add a "no-hover" class to all a tags that contain an image:

$('a > img').each(function() {
  $(this).parent().addClass('no-hover');
});

And in CSS i did this:

a.no-hover:hover {
  border-bottom: 0px
}

If jQuery is too heavy for you, you can use picoQuery. Its just 1k, if only you choose the .each() method.

Answer 7

Have you tried a img {border:none} ?