我有这个示例代码，它悬停在图像上以更改背景颜色。悬停时如何用颜色填充整个图像？
在我的代码片段中，它只填充 a 标记元素的背景颜色，而不填充图像。
这里有一张图片可以进一步澄清我的问题。
如何使用标签元素中的悬停效果实现这一点。
a img:hover {
background-color: purple;
}
a:hover {
background-color: yellow;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- Hovered with image no text -->
<a href="https://www.w3schools.com"><img src="cart.png"></a>
<!-- Hovered without image just text -->
<a href="http://www.wikipedia.org">Change color text</a>
</p>
</body>
</html>最佳答案
假设你的图片是白色的，其他部分是透明的。只需像这样更改 CSS:
a img {
background-color: purple;
}
a:hover img {
background-color: yellow;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- Hovered with image no text -->
<a href="https://www.w3schools.com"><img src="cart.png"></a>
<!-- Hovered without image just text -->
<a href="http://www.wikipedia.org">Change color text</a>
</p>
</body>
</html>关于javascript - 当鼠标悬停在 <a> 标签元素中时，如何完全改变图像的颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42824919/