javascript - 为什么 mouseover 没有检测到 JQuery 中另一个 div 上的其他 div？

Question

我正在添加鼠标悬停事件。根据我的 HTML 代码，myDiv正好出现在 <img> 上.我在 <img> 上都检测到鼠标悬停和 myDiv .
但是，当我将鼠标悬停在 <img> 上时会发生什么？它工作正常并且检测到它悬停在图像上但是当我悬停在 myDiv 上时不离开<img> , 它没有检测到 myDiv , 它仍然在 <img> .如何在不离开 img 的情况下检测 myDiv。

下面是我的代码

我的 HTML 代码

<style>
 .myDiv{
     position:absolute;
  }
 .hoverEffect{
     border: 2px solid #0044ff;
     opacity: 0.5;
  }
</style>
<div class="myDiv">
    <h1>Heading</h1>
</div>
<img src="myimage.jpg">

JQuery 代码

$('body').mouseover(function(e) {
      //e.target For Detecting div or image
      $(e.target).addClass('hoverEffect');
});
$('body').mouseout(function(e) {
     $(e.target).removeClass('hoverEffect');
}

在下面的 GIF 图像中，您可以看到上图中的内容“欢迎使用我们的应用程序”。将鼠标悬停在图像上后，它没有检测到具有另一个 div 的内容。

在上面的 JQuery 代码中，我添加了类“hoverEffect”以悬停在 div 上。 .唯一的问题是在 hoverEffect类，那就是不透明度。当我使用不透明度时，它没有检测到 myDiv但是当我从 css 代码中删除不透明度时，它工作正常。

Working jsfiddle link (不使用不透明度)
Not Working jsfiddle link (不透明)

我的问题是，为什么当我向类(class)添加不透明度时它不起作用？如果可以在不从类中移除不透明度的情况下做到这一点，那么该怎么做呢？

Answer 1

使用z-index，尝试这样修改css

.myDiv{
  position:absolute;
  z-index : 9;
}
.myDiv h4{
  z-index : 99;
}

工作 fiddle :https://jsfiddle.net/w6ezx38a/3/