2

class="box"ページ上のすべての DIV にホバー効果を使用しています。

Javascript :

    JQ(".box").hover(function() {
        JQ(this).nextAll(".tooltip:first").css('visibility','visible');
    });

    JQ(".box").mouseleave(function(event) {
        JQ(this).nextAll(".tooltip:first").css('visibility','hidden');
    });

Firefox と Chrome では正常に動作しますが、IE9 と Opera では.tooltip、マウスが .box DIV の境界内を移動すると、div が消えて再表示されます。DIV のすべてのピクセルに対してホバー関数が呼び出され続ける理由はありますか?

ここで動作するバージョンを見ることができます

4

3 に答える 3

3

1 つの関数のみをその関数に渡す.hover()と、マウスの出入りの両方で呼び出されます。そのため、mouseleave ハンドラーと競合している出入りの両方で表示されます。

これを行うことができます：

JQ(".box").hover(function() {
    JQ(this).nextAll(".tooltip:first").css('visibility','visible');
}, function() {
    JQ(this).nextAll(".tooltip:first").css('visibility','hidden');
});

または、もう少し DRY (コードの繰り返しが少ない):

JQ.fn.nextTip = function(vis) {
    return this.nextAll(".tooltip:first").css('visibility', vis);
}

JQ(".box").hover(function() {
    JQ(this).nextTip('visible');
}, function() {
    JQ(this).nextTip('hidden');
});

実際のデモ: http://jsfiddle.net/jfriend00/DkgVg/

于 2012-12-18T09:13:55.560 に答える
1

hoverパーツを次のものに置き換えてみてください。

JQ(".box").mouseenter(function() {
    JQ(this).nextAll(".tooltip:first").css('visibility','visible');
});

または、保持hoverして実行します：

JQ(".box").hover(function() {
    JQ(this).nextAll(".tooltip:first").css('visibility','visible');
}, function(){
    JQ(this).nextAll(".tooltip:first").css('visibility','hidden');
});
于 2012-12-18T09:14:24.947 に答える
0

この jQuery オブジェクトのイベント関数の実行を停止するだけです

JQ(".box").hover(function() {
    JQ(this).nextAll(".tooltip:first").stop(true,true).css('visibility','visible');
}, function(){
    JQ(this).nextAll(".tooltip:first").stop(true,true).css('visibility','hidden');
});
于 2012-12-18T09:25:35.213 に答える