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

Question

我正在添加鼠标悬停事件。根据我的 HTML 代码，myDiv 恰好出现在<img> 上。我在<img> 和myDiv 上都检测到鼠标悬停。
但是会发生什么，当我将鼠标悬停在<img> 上时它工作正常并且它检测到它悬停在图像上但是当我悬停在myDiv 上而不离开<img> 时，它没有检测到myDiv，它仍然在@987654331 @。如何在不离开 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 类中，那就是不透明度。当我使用 opacity 时，它没有检测到myDiv，但是当我从 css 代码中删除 opacity 时，它工作正常。

Working jsfiddle link（不使用不透明度）
Not Working jsfiddle link（使用不透明度）

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

Answer 1

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

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

工作小提琴：https://jsfiddle.net/w6ezx38a/3/