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)

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

Solution 2

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

That should do the trick.

Solution 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>

Comments

[seanmonstar]

he's assigned a rule to anchors, so stating something inside doesn't have a border wont affect the actual hover tag

[Admin]

I've linked to the live example in the main post above ... in case that helps.

[Admin]

I've linked to the live example in the main post above ... in case that helps.

[Relster]

Hmm, odd thing is that the bottom border only shows up in IE8. Tested compaitibiliy mode (doesn't display any border) and Chrome 3.0 (works as expected). Did specifying the :hover directly on a class for the image not work either?

[Relster]

To get this working in IE8, I added this below my a:hover in the css file: img { border: 0px; }

[Admin]

@Relster, the bottom-border shows up for me using Firefox 3.5RC

[Admin]

@seanmonstar, is the ">" selector effectively a "has"?

[Admin]

@Relster, it appears the bottom-border also show in IE6 ... but webkit doesn't show it, so Chrome & Safari works.

[seanmonstar]

no, > means immediate child. div > a selects <div><a href="#">asdf</a></div> but not <div><p><a href="#">qwer</a></p></div>.

[Relster]

Maybe it doesn't make sense for the site, but maybe it does: what about putting your main navigation links inside of a specific div and then making your css .mainnav a:hover {border-bottom: 1px;}. Rather than using the bottom border everywhere and limiting the img, you're limiting the border to only where you need it.