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 at: http://tinyurl.com/lbyn3v (try to hover over the logo in top-left)

Answer 1

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

That should do the trick.

Answer 2

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 3

Have you tried a img {border:none} ?

Answer 4

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