Search code examples
htmlcsscss-selectorsimagehref

HTML: remove a:hover for images?

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

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