从不同的元素触发 css 过渡

Question

我有一个div，里面有两张图片。两个图像都包含在一个 a 标记中。

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

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

有什么方法可以实现吗？

Answer 1

改用父级a 元素的:hover 伪类：

div a:hover img {opacity:1;}

这将同时将过渡应用于两个子 img 元素。