CODEWITHSUNDEEP
htmlcss
Lennart
Lennart

Reputation: 1028

Select a-element without img inside

On an html5 webpage I have a hover-effect. Like this:

a:hover {
   background: #EFEFEF;
}

I also have a list of images with links:

<a href="x">
    <img src="images/y.png" />
</a>

When hovering over those links, a #EFEFEF-colored line appears under the image. How do I remove that?

It's not the text-decoration: underline, also fiddling with padding didn't work.

Upvotes: 1

Views: 99

Answers (5)

Eric A. Meyer
Eric A. Meyer

Reputation: 940

My guess is that the line you’re seeing is the descender space under the image (which sits on the text baseline) being filled in with the background color. Try text-align: bottom applied to the image itself and see if the line goes away or shifts to the top of the image. If it doesn’t, try text-bottom.

If either of those works, then vertical alignment is the problem, and you can fix it by adding a page-colored background to the image and giving it some bottom padding (say, 0.15em) while also aligning it to the bottom of the line of text (using bottom or text-bottom as before).

Upvotes: 0

Ege
Ege

Reputation: 1202

If your image links point to a common directory or website, you can actually select them by using the attribute selector with a regular expression trick.

a[href*="foo"]:hover {
   background:transparent;
}

So basically, this will select all the a elements with "foo" in their href attribute. the asterisk before the equal sign acts as a wildcard. Otherwise, it would only select the elements with exactly the "foo" href.

Upvotes: 0

Mr Lister
Mr Lister

Reputation: 46589

As an enhancement to Jonathan's answer, if you don't want the layout of the element to change, I'd suggest turning the a into an inline-block as well as making the img a block.

a {display:inline-block}
a img {display:block}

That way, the a will stay inline, and the text will keep its integrity. See jsFiddle.

Upvotes: 1

Sampson
Sampson

Reputation: 268424

You're likely seeing the background of the anchor beneath the image. Set the image's display to block:

a img {
  display: block;
}

Before and After Demo: http://jsbin.com/enikoz/edit#preview

Keep in mind though that converting an inline image into a block element can affect our layout.

Upvotes: 3

Chris Shaffer
Chris Shaffer

Reputation: 32575

You are seeing the background color in the whitespace underneath the image; If you remove the whitespace after the image, it should go away:

<a href="x">
    <img src="images/y.png" /></a>

Upvotes: 0

Related Questions