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

我正在添加鼠标悬停事件。根据我的HTML代码，myDiv正好出现在屏幕上。我在和myDiv上都检测到鼠标悬停。 但发生了什么，当我将鼠标悬停在它正常工作的位置，它检测到它在图像上悬停，但当我将鼠标悬停在myDiv上而不离开时，它没有检测到myDiv，它仍然在图像中。如何在不离开img的情况下检测myDiv

下面是我的代码 我的HTML代码

在下面的GIF图像中，您可以在上面的图像中看到欢迎使用我们的应用程序的内容。在图像上悬停之后，它并没有检测到这个有另一个div的内容。 在上面的JQuery代码中，我已经将类hoverEffect添加到hovereddiv中。唯一的问题是hoverEffect类，这就是不透明度。当我使用不透明度时，它不会检测myDiv，但当我从css代码中删除不透明度时，它工作正常。 不使用不透明度 不透明

我的问题是，为什么我在类中添加不透明度时它不起作用？ 如果可以在不从类中删除不透明度的情况下执行此操作，那么如何执行此操作？

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

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

---

工作小提琴：

它是为both@NikhilGhuse请尝试在两个JSFIDLE上的Hello World上悬停，并检查两个的行为。我已经检查了两个。现在我得到了答案，因为答案已发布。您需要chenge z-IndexHanks以获得解决方案。但我无法理解不透明性是如何影响行为的？我们可以用js或Jquery代码来解决这个问题吗？因为我在JQuery代码中把HTML看作是动态的，所以你可以说，在不改变CSS/HTML的情况下，我们可以修复它吗？是的，你可以在CSS中创建类并通过JQuery添加/删除

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

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