jquery - 如何将mouseleave事件设置为after（）生成div？

Question

我使用下面的函数从中心放大div。导致jQuery生成元素无法再次被jQuery访问，所以我把onmouseout属性放到了生成的<div>。但是当我将鼠标移动到div的子元素时，触发了onmouseout事件，这不是什么问题我想要。

那么，我该如何解决这个问题，或者有没有其他方法可以达到同样的效果呢？

shows = $(".shows"); 
shows.bind('mouseenter', function() { 
    enlargeCenter($(this), 1.8, 'bigger'); 
}); 

function enlargeCenter(des, ratio, nclass) { 
    var oWidth = des.width(); 
    var oHeight = des.height(); 
    var nHeight = oHeight * ratio; 
    var nWidth = oWidth * ratio; 
    var left = des.position().left; 
    var top  = des.position().top; 
    left  = (oWidth - nWidth)/2 - oWidth; 
    top   = (oHeight - nHeight) /2; 


    des.after("<div class='" + nclass + "' onmouseout='remove()'>" + des.html() + "</div>"); 
    $("." + nclass).css({ 
     'width': nWidth, 
     'height': nHeight, 
     'left': left, 
     'top': top 
    }); 
} 

这里是CSS代码

.shows, .bigger { 
    float:left; 
width:200px; 
height:250px; 
position: relative; 
left:0; 
top:0; 
border:1px #ccc solid; 
background: RGB(245,245,245); 
overflow:hidden; 
} 

.bigger { 
border:0; 
background: white; 
box-shadow: #ccc 0 0 5px; 
-moz-box-shadow: #ccc 0 0 5px; 
-ms-box-shadow: #ccc 0 0 5px; 
-webkit-box-shadow: #ccc 0 0 5px; 
} 

HTML

<div class="container"> 
    <div class="shows"> 
     <p>odfelakjfelkavjekvaelkfjjjj</p> 
    </div> 
</div> 

如果您移动鼠标在<p>的onmouseout事件将被触发，更大的div将被删除。

Answer 1

只要鼠标离开目标元素或输入子元素，鼠标事件就会触发。 IE有一个专有的mouseleave事件，只有在鼠标完全离开目标元素时才会被触发。 jQuery用mouseleave函数来模拟这个。我尝试了以下改变，我认为它会做你想做的：

... 
des.after("<div class='" + nclass + "'>" + des.html() + "</div>"); 
    $("." + nclass).css({ 
     'width': nWidth, 
     'height': nHeight, 
     'left': left, 
     'top': top 
    }).mouseleave(function(){$(this).remove()}); 
... 

Answer 2

因为我没有什么看，我猜这可能会解决你的问题，

更改从mouseenter事件，

shows.bind('mouseenter', function() { 
    enlargeCenter($(this), 1.8, 'bigger'); 
}); 

此，

shows.bind('mouseenter', function(evt) { 
    evt.stopPropagation(); 
    enlargeCenter($(this), 1.8, 'bigger'); 
});