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 Example