a：悬停影响文本超链接，但不影响img超链接

Question

我的html文件有类似

的内容

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

我的css文件有

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

这适用于文本超链接。将鼠标悬停在文本超链接上时，背景颜色会从FFF更改为ABB。

但在这种情况下，img也是一个超链接，因为它是svg，它的背景显示。如何在悬停时制作img更改的背景？

Answer 1

尝试使用此语法a:hover img { }

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

Answer 2

您已使用此规则为图像设置背景：

img
{
    background: #FFF;
}

如果您希望 背景更改锚点的悬停，则必须为此制定规则。

a:hover img
{
    background: #F00;
}

否则你需要确保图像的（html）背景是透明的，这样你才能显示锚的背景。

如果你试图将svg嵌入到页面中并使用CSS来处理那些元素，那就完全不同了。