Question

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?

Answer 1

try using this syntax a:hover img { }

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