我正在添加鼠标悬停事件。根据我的 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)添加不透明度时它不起作用?
如果可以在不从类中移除不透明度的情况下做到这一点,那么该怎么做呢?
最佳答案
使用z-index
,尝试这样修改css
.myDiv{
position:absolute;
z-index : 9;
}
.myDiv h4{
z-index : 99;
}
工作 fiddle :https://jsfiddle.net/w6ezx38a/3/
关于javascript - 为什么 mouseover 没有检测到 JQuery 中另一个 div 上的其他 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46558849/