87,904
社区成员
发帖
与我相关
我的任务
分享自己写了个小效果，但是不知道为什么一直不是很顺畅。老是闪。
我想要的效果是：鼠标指就出现一个遮挡层。
鼠标离开对象，遮挡层就消失。
我用了两种方法都是这样。鼠标一移动遮挡层就消失，然后又出现。这样闪啊闪啊。
是我的CODE有哪里不对吗？请大神来帮帮我，教教我怎么优化，谢谢。
下面是我的CODE
鼠标离开对象，遮挡层就消失。
我用了两种方法都是这样。鼠标一移动遮挡层就消失，然后又出现。这样闪啊闪啊。
是我的CODE有哪里不对吗？请大神来帮帮我，教教我怎么优化，谢谢。
下面是我的CODE
<!DOCTYPE>
<html>
<head>
<meta charset = "utf-8" />
<script src = "http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script>
//$().ready(function(){
//$(".div1").mouseover(function(){
//$(".div2").show();
//} )
/*$("img").mouseenter(function(event){
event.stopPropagation();
$(".div2").stop().css("display","inline");
} )
.mouseleave(function(event){
event.stopPropagation();
$(".div2").stop().css( "display", "none");
} )
} )
*/
$().ready(function(){
$(".div1").mouseenter(function(){
$(".div2").clearQueue();
$(".div2").addClass("modal");
} )
.mouseleave(function(){
$(".div2").clearQueue();
$(".div2").removeClass("modal");
} )
})
</script>
<style>
.div1 {
width:100px;
height:100px;
}
img {
width:100px;
}
.modal {
width:100px;
height:100px;
background-color:grey;
position:absolute;
left:8px;
top:0;
opacity:0.6;
}
</style>
</head>
<body>
<div class = "div1">
<div>
<img src = "6011443968.jpg">
</div>
</div>
<div class = "div2" >
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
hopperhuang 2016-07-14
- 打赏
- 举报
啊哈，谢谢启发。
设置z-index的话，就把遮盖层放到最低层了，这样遮盖层的效果就展现不出来了。
但是我用另外一个方法实现了。
将.mouseout()方法的对象改成 .div2，这样鼠标只要在对象里面指着的都是后面冒出来的div2，就不会有一闪一闪的效果了。
谢谢大神的提醒。
天际的海浪 2016-07-14
- 打赏
- 举报
你div2出来之后是覆盖在div1上面的，这样鼠标就从div1上移到div2上了，自然触发div1的mouseleave事件了。
解决方法是把div2放到div1的里面，或者对div2设置z-index:-1
