通过将鼠标悬停在 ::after 元素上来更改图像样式

Question

我有一个主图像，上面有一个箭头的次图像，其中箭头是使用伪后元素插入的。

现在我想在将鼠标悬停在主图像上时更改其不透明度。这工作正常，直到有人将箭头图像悬停在顶部 - 然后它没有。如何在辅助箭头图像上放置悬停样式，这会改变主图像的不透明度？

谢谢！

Answer 1

您可以添加包装器，并为其悬停，如下所示：

<div class='wrap'>
  <div class='img'></div>
</div>

然后，添加这样的样式：

.wrap:hover + .img {
 }

Answer 2

尝试将此 css 应用于您的伪后元素：

pointer-events:none