Question

我正在添加mouseover事件。根据我的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图片中，您可以看到内容＆＃34;欢迎访问我们的应用程序＆＃34;在上面的图像。在徘徊在图像上之后，它没有检测到具有另一个div的内容。

更新信息
在上面的JQuery代码中，我添加了类＆＃34; hoverEffect＆＃34;徘徊div。唯一的问题是在hoverEffect类中，这是不透明的。当我使用不透明度时，它没有检测到myDiv，但是当我从css代码中删除不透明度时，它工作正常。

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

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

Answer 1

您是否尝试过z-index css属性来获取img的div前端？

.myDiv{
  z-index:10;
}

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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">

＆＃13;

鼠标事件没有检测到JQuery中另一个div上的其他div

2 个答案: