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

Question

我有一个主图像，顶部有一个箭头的第二个图像，使用伪后元素插入箭头。

现在，我希望在将鼠标悬停在主图像上时更改主图像的不透明度。这很好，直到有人将箭头图像悬停在顶部 - 然后它就没有了。如何在辅助箭头图像上放置悬停样式，这会更改主图像的不透明度？

谢谢！

Answer 1

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

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

并添加如下样式：

.wrap:hover + .img {
 }

Answer 2

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

pointer-events:none