从不同的元素触发CSS转换

Question

我有一个div里面有2个图像。这两个图像都包裹在一个单独的a标签中。

第一个图像是实体图像，它有一个相对位置。第二个图像是一个透明的PNG，它位于实体图像的顶部，具有绝对定位。两张图片大小相同&两张图片的不透明度都降低了。

基本上，我希望能够在悬停时将两个图像过渡到完全不透明，但由于透明的PNG完全覆盖了实体图像。使用:hover只会触发顶部图像的过渡，因为从技术上讲，我没有将鼠标悬停在下面的实体图像上。

有什么办法可以做到这一点吗?

Answer 1

使用父元素a的:hover伪类:

div a:hover img {opacity:1;}

这将同时对img子元素应用过渡。