css - 从不同的元素触发 css 过渡

Question

我有一个div里面有 2 个图像。两个图像都包含在一个a标签中。

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

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

有什么办法可以实现吗？

Answer 1

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

div a:hover img {opacity:1;}

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