gpt4 book ai didi

javascript - 当鼠标悬停在 标签元素中时,如何完全改变图像的颜色?

转载 作者:行者123 更新时间:2023-11-28 04:08:46 26 4
gpt4 key购买 nike

我有这个示例代码,它悬停在图像上以更改背景颜色。悬停时如何用颜色填充整个图像?

在我的代码片段中,它只填充 a 标记元素的背景颜色,而不填充图像。

这里有一张图片可以进一步澄清我的问题。

CartIcon

如何使用标签元素中的悬停效果实现这一点。

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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com