Question

我希望样式应用于“a”元素，而不是img。这是一个例子：

a：悬停{background：＃555;}

我试着这样做：

a：悬停img {background：none;}

虽然我知道它不会做任何事情。

我在this question中找到的解决方案对我不起作用，因为“display：none”在悬停时移动图像。

Answer 1

img位于锚点内部，因此无论图像元素中的背景如何，背景都不会在图像外部。图像是否有填充，边距或透明度？

Answer 2

我不确定你在这里问的是什么。

如果您在围绕图像的A标签上放置背景颜色，您将永远不会看到背景，因为图像会覆盖它。

如果要在鼠标悬停时显示背景颜色并隐藏图像，可以这样做（插入自己的图像尺寸，文件名等）：

a {
   display:block;
   height:100px;
   width:100px;
   background-image:url(Images/sample.gif);
   background-color:#555
}

a:hover {
  background-image:none;
}

Answer 3

a:hover img { background:none }

意味着当有人将鼠标悬停在您的IMG上时，IMG背景将设置为无 - 这意味着它将显示您的A的背景，因为它包含IMG。（IMG很清楚，A有背景，但IMG在'A之内或之上';因此，我们看到A的背景）。如果您的图像部分透明，则会显示A的背景。

最佳解决方案可能是

a {background:#555;}
/* set image to the background color of the layer you want to get back to */
a:hover img { background:#fff; }

Answer 4

链接内的图像不会继承背景。从图像中删除背景不会做任何事情，因为它没有任何开始。

如果您试图在图像背景中“打洞”，那是不可能的。您必须在链接中放置其他元素以填充图像未占用的空间，并在这些元素上设置背景。

忽略内部图像中的悬停样式

4 个答案: