css - 从不同的元素触发 css 转换

Question

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

第一张图是立体图，有相对位置。第二张图片是一个透明的 PNG，它以绝对定位方式位于纯色图片之上。两张图片大小相同，并且两张图片的不透明度都降低了。

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

有什么办法可以实现吗？

Answer 1

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

div a:hover img {opacity:1;}

这会将转换同时应用于两个子 img 元素。