爲什麼元素疊加閃爍？

Question

我試圖在鼠標懸停它時將覆蓋圖添加到div。雖然它起作用，但在我將鼠標移動到div內時，覆蓋層會一直閃爍。 我該如何預防？

HTML：

<div id="d4" class="dmc_block" style="width:60%; background:#eee; z-index:1"> 
    <div style="padding:20px;"> 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p> 
    </div> 
</div> 

JS：

$('body').on('mouseenter','.dmc_block',function(){ 
    var o = $(this).offset(); 
    var h = $(this).height(); 
    var w = $(this).width(); 
    $('<div>').addClass('hover').css({width:w,height:h,left:o.left,top:o.top,position:'absolute',zIndex:2}).insertAfter(this); 
}).on('mouseleave','.dmc_block',function(){ 
    $('.hover').remove(); 
});  
$('body').on('mouseenter','.hover',function(){return false;}); 

小提琴：http://jsfiddle.net/T9Lhw/

Answer 1

更改此：

.on('mouseleave','.dmc_block',function(){ 

向該：

.on('mouseleave','.hover',function(){ 

Fiddle

當疊加.hover置於上述.dmc_block，它觸發的.dmc_block的mouseleave因爲它是現在的.hover下方。你想要的是的mouseleave。