4

我使用下面的函数从中心放大一个 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将被删除。

4

2 回答 2

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()});
...
于 2012-12-20T16:49:51.260 回答
0

由于我没有什么可看的，我猜这可能会解决您的问题，

更改您的mouseenter活动，

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

对此，

shows.bind('mouseenter', function(evt) {
    evt.stopPropagation();
    enlargeCenter($(this), 1.8, 'bigger');
});
于 2012-12-20T06:15:25.717 回答