Question

jquery 鼠标经过div div上面显示一个层 离开div 这个层消失 但是鼠标移上去 不停的闪动 怎么回事呢

<style>
.bjceng{ width:auto; height:auto; background:#CCCCCC; position:absolute; top:0px; left:0px;filter:alpha(opacity=90);-moz-opacity:0.9;opacity:0.9; display:none;}
.bjceng a{display:block; width:50%; height:80px; float:left; display:inline; text-align:center; line-height:80px; color:#FF6600; font-size:12px; font-weight:bold;}
</style>
<div class="bjceng">
<a href="#">编辑</a>
<a href="#">删除</a>
</div>
<script>

$(".sckLpubp").hover(function(){
swidth=$(this).width(); //获得鼠标经过这个div的宽度
sheight=$(this).height();//获得鼠标经过这个div的高度度
soffset=$(this).offset();//获得鼠标经过这个div的偏移位置

$('.bjceng').css({'width':swidth+1,'height':sheight+1,'top':soffset.top,'left':soffset.left});//设置弹出层的宽 高 位置
$('.bjceng').show();这层显示
},function(){

$('.bjceng').hide();
}
);

</script>

Answer 1

$('.bjceng') 这个层显示的时候把sckLpubp 这个层挡住 触发了$('.bjceng').hide(); 所以会一直闪来闪去
解决办法 方法很多，简单说2种
1：调整bjceng的位置，让其显示的时候不遮挡sckLpubp 层
2：调整JS bjceng 这个离开的时候才控制其隐藏

追问

1 不能调整位置，必须在那个div上面显示 2 怎样调整呢

追答

$(".sckLpubp").mouseover(function(){
    swidth=$(this).width(); //获得鼠标经过这个div的宽度
    sheight=$(this).height();//获得鼠标经过这个div的高度度
    soffset=$(this).offset();//获得鼠标经过这个div的偏移位置
    $('.bjceng').css({'width':swidth+1,'height':sheight+1,'top':soffset.top,'left':soffset.left});//设置弹出层的宽 高 位置
    $('.bjceng').show();//这层显示
});
$('.bjceng').mouseout(function(){
    $(this).hide();
});

Answer 2

看这个效果对不对

<style>
.bjceng{background:#CCCCCC;position:absolute;top:0px;left:0px; filter:alpha(opacity=90);-moz-opacity:0.9;opacity:0.9;display:none;border:1px solid #ccc; background:#F9C;}
.sckLpubp{background:#CCC;border:1px solid #999;width:100px;height:100px;}
</style>

<div class="bjceng">
<a href="#">编辑</a>
<a href="#">删除</a>
</div>
<div class="sckLpubp"></div>

$(document).ready(function(){

    $(".sckLpubp").mouseover(function(){
        swidth=$(this).width(); //获得鼠标经过这个div的宽度
        sheight=$(this).height();//获得鼠标经过这个div的高度度
        soffset=$(this).offset();//获得鼠标经过这个div的偏移位置
        $('.bjceng').css({'width':swidth+10,'height':sheight+10,'top':soffset.top,'left':soffset.left});//设置弹出层的宽 高 位置
        $('.bjceng').show();    //显示
        $('.sckLpubp').hide();    //隐藏
    });
    $(".bjceng").mouseout(function(){
        $('.bjceng').hide();    //显示
        $('.sckLpubp').show();    //隐藏
    });
});

追问

还是闪

Answer 3

逗号后面第二个参数的应该是重置数据，这样就可以不闪了

Answer 4

CSS中加入pointer-events: none;