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

一旦鼠标离开目标元素或进入子元素，mouseout 事件就会触发。 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()});
...