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

【问题标题】：Change image styling by hovering over ::after element通过将鼠标悬停在 ::after 元素上来更改图像样式
【发布时间】：2016-02-29 11:34:33
【问题描述】：

我有一个主图像，顶部有一个箭头的辅助图像，其中箭头是通过使用伪后元素插入的。

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

谢谢！

【问题讨论】：

【解决方案1】：

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

pointer-events:none

【讨论】：

【解决方案2】：

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

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

并且，添加这样的样式：

.wrap:hover + .img {
 }

【讨论】：

谢谢。由于我在一个网站上工作，所有内容都在内容视图中设置（我知道 - 但对此无能为力..）我无法添加任何包装器。我可以在现有布局上使用相同的方法吗？ oi63.tinypic.com/29zaddt.jpg