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 に答える