1

昨日だけ、HTMLの境界線の色をアニメーション化する必要があり、 bitstormdivからカラーアニメーションjqueryプラグインに出くわしました。軽量で使いやすいですが、バグがあるようです。私は次のHTMLを持っています：

<div class="object-list-item" id="oli-0" reference="0">
    <div class="close_btn" tooltip_text="Remove this object"></div>
    <img class="thumb" src="img/text-icon.png" />
    <div class="text-preview"></div>
    <div class="clear"></div>
</div>

ここで、内側の要素と親要素の境界の間にスペース（ピクセル単位）があります。mouseoverさらに、とイベントの2つのイベントハンドラーを追加し、次のようmouseoutに要素にアタッチしました。object-list-item

$(document)
        .on("mouseover", "div.object-list-item", function(){
            $(this).animate({ borderColor : "#555" },300);                                                       
        })
        .on("mouseout", "div.object-list-item", function(){
            $(this).animate({ borderColor : "#ddd" },300);                                                       
        });

また、この動作を確認できるフィドルをまとめました：http: //jsfiddle.net/2UKRG/2/

問題は、内部要素のいずれかにカーソルを合わせると、イベントハンドラーがそれらの要素に対してもトリガーすることです。どうすればこれを修正できますか？

4

2 に答える 2

2

私は今怠惰ですが、あなたはただに変更mouseover, mouseoutする必要があると確信していますmouseenter, mouseleave：

http://jsfiddle.net/2UKRG/3/

$(document)
    .on("mouseenter", "div.object-list-item", function(){
        $(this).animate({ borderColor : "#555" },300);                                                         
    })
    .on("mouseleave", "div.object-list-item", function(){
        $(this).animate({ borderColor : "#ddd" },300);                                                         
    });​
于 2012-10-05T13:46:25.933 に答える
2

hover代わりに変更してみることもできます-http://jsfiddle.net/WJE2y/

$('div.object-list-item').hover(function(){
    $(this).animate({ borderColor : "#555" },300);
}, function(){
    $(this).animate({ borderColor : "#ddd" },300);
});

' why 'について-mouseoverイベントとmouseenterイベントの違いは何ですか？それを非常によく説明し、http：//docs.jquery.com/Events/mouseoverへのリンク

于 2012-10-05T13:51:28.507 に答える