CODEWITHSUNDEEP
htmlcss
Calaf
Calaf

Reputation: 10817

a:hover affects text hyperlinks, but not img hyperlinks

My html file has something like

<a href="foo.html">
  <img width="64" src="foo.svg" alt="foo"/>
</a>

and my css file has

body
{
    background: #FFF;
}
a:hover
{
    background: #ABB;
}
img
{
    background: #FFF;
}

This works fine for text hyperlinks. When hovering over a text hyperlink, the background color changes from FFF to ABB.

But in this case the img is also a hyperlink, and because it's svg, its background shows. How do I make the background of an img change while hovering?

Upvotes: 1

Views: 249

Answers (2)

JayC
JayC

Reputation: 7141

You're already setting a background for the image with this rule:

img
{
    background: #FFF;
}

If you want that background to change of the hover of the anchor, you have to make a rule for that. 

a:hover img
{
    background: #F00;
}

Otherwise you need to make sure the image's (html) background is transparent so you're only displaying the background of the anchor.

If you're trying to embed svg into the page and use CSS for certain elements in THAT, that's a completely different thing.

Upvotes: 0

hunter
hunter

Reputation: 63522

try using this syntax a:hover img { }

a:hover,
a:hover img
{
    background: #ABB;
}

Upvotes: 2

Related Questions