css - 我可以在父 div 悬停时更改嵌套图像的背景颜色吗？

Question

这是我在这个网站上的第一个问题，希望有人能帮助我。

我有一个父 div，它是指向另一个页面的链接。此 div 中有一个 .png 图像，当我将鼠标悬停在父 div 上时，我希望此 png 图像的背景颜色发生变化，而不仅仅是图像本身。

我只想在 HTML 和 CSS 中执行此操作

这可能吗？

Answer 1

我认为您正在寻找类似的东西，但是 .png 需要透明才能显示不同的背景颜色

CSS：

#parent{
    height: 400px;
    width: 400px;
    background-color: green;
}
img{
    height:100px;
    width:100px;
}
#parent:hover img{
    background-color:white;
}

HTML

<div id="parent">
    <img src="something.png" alt="1" />
</div>

jsFiddle 示例

Answer 2

无法使用 html css 更改 img 背景，如果要从其父级继承的 img 背景，则使用透明背景。欢迎来到！