鼠标事件未检测到 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 属性将 div 放在 img 前面？

.myDiv{
  z-index:10;
}

Answer 2

您可以检测body 中的每个元素，移动鼠标并在控制台中查看。这是一个例子：

$('body').mouseover(function(e) {
     console.log(e.target);
});

.myDiv{ 
  position:absolute;  
  background-color:violet;
}

h1 {
  background-color:yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myDiv">
    <h1>Heading</h1>
</div>
<img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg">