0

hoverintent の機能を分割しましたが、それは機能しましたが、マウスが離れるまで div が非表示になりませんか?

私はこれを書きましたが、問題なく動作します。おそらくわかるように、私はjqueryが初めてです。

$("img.nexthover").hover(
function() { this.src = this.src.replace("_off", "_on");
},
function() { this.src = this.src.replace("_on", "_off");
});
$('#A,#B,#C,#D,#E,#F,#G,#H,#I,#J').addClass('nextHide');
$('.nextbuttonA').hover(function() {
$('#A.nextHide').fadeIn("slow");        
$('#B,#C,#D,#E,#F,#G,#H,#I,#J.nextHide').fadeOut();
});
$('.nextbuttonB').hover(function() {
$('#B.nextHide').fadeIn("slow");
$('#A,#C,#D,#E,#F,#G,#H,#I,#J.nextHide').fadeOut();
});     
$('.nextbuttonC').hover(function() {
$('#C.nextHide').fadeIn("slow");
$('#A,#B,#D,#E,#F,#G,#H,#I,#J.nextHide').fadeOut();
});         
$('.nextbuttonD').hover(function() {
$('#D.nextHide').fadeIn("slow");
$('#A,#B,#C,#E,#F,#G,#H,#I,#J.nextHide').fadeOut();
}); 
$('.nextbuttonE').hover(function() {
$('#E.nextHide').fadeIn("slow");
$('#A,#B,#C,#D,#F,#G,#H,#I,#J.nextHide').fadeOut();
}); 
$('.nextbuttonF').hover(function() {
$('#F.nextHide').fadeIn("slow");
$('#A,#B,#C,#D,#E,#G,#H,#I,#J.nextHide').fadeOut();
}); 
$('.nextbuttonG').hover(function() {
$('#G.nextHide').fadeIn("slow");
$('#A,#B,#C,#D,#E,#F,#H,#I,#J.nextHide').fadeOut();
}); 
$('.nextbuttonH').hover(function() {
$('#H.nextHide').fadeIn("slow");
$('#A,#B,#C,#D,#E,#F,#G,#I,#J.nextHide').fadeOut();
}); 
$('.nextbuttonJ').hover(function() {
$('#I.nextHide').fadeIn("slow");
$('#A,#B,#C,#D,#E,#F,#G,#H,#J.nextHide').fadeOut();
}); 
$('.nextbuttonK').hover(function() {
$('#J.nextHide').fadeIn("slow");
$('#A,#B,#C,#D,#E,#F,#G,#H,#I.nextHide').fadeOut();
});
$('#A,#B,#C,#D,#E,#F,#G,#H,#I,#J').click(function(){
    $('.nextHide').fadeOut();
});

hoverIntent を機能させるために、関数を次のように分割します。

$("img.nexthover").hover(
function() { this.src = this.src.replace("_off", "_on");
},
function() { this.src = this.src.replace("_on", "_off");
});
$('#A,#B,#C,#D,#E,#F,#G,#H,#I,#J').addClass('nextHide');

$('.nextbuttonA').hoverIntent(function() {
$('#A.nextHide').fadeIn("slow");
}, function() {
$('#B,#C,#D,#E,#F,#G,#H,#I,#J.nextHide').fadeOut();
});

$('.nextbuttonB').hoverIntent(function() {
$('#B.nextHide').fadeIn("slow");
}, function() {
$('#A,#C,#D,#E,#F,#G,#H,#I,#J.nextHide').fadeOut();
});

---etc----

しかし、以前のようにボタンを離れるまで、div は非表示になりませんか? これが初心者すぎる場合は申し訳ありませんが、飛び込んで独学しています...

4

1 に答える 1

0

私のjQuery構文はおそらくもっと良いかもしれませんが、私は別のプログラムで作業しているので、HTMLを入力する方法に制限があります

$("img.nexthover").hover(
function() { this.src = this.src.replace("_off", "_on");
},
function() { this.src = this.src.replace("_on", "_off");
});
$('#A,#B,#C,#D,#E,#F,#G,#H,#I,#J').addClass('nextHide');

$('.nextbuttonA').hoverIntent(function() {
$('#A').fadeIn("slow");$('#B,#C,#D,#E,#F,#G,#H,#I,#J').fadeOut();
}, function() {
$('#B,#C,#D,#E,#F,#G,#H,#I,#J').hide();
});

$('.nextbuttonB').hoverIntent(function() {
$('#B').fadeIn("slow");$('#A,#C,#D,#E,#F,#G,#H,#I,#J').fadeOut();
}, function() {
$('#A,#C,#D,#E,#F,#G,#H,#I,#J').hide();
});

-------etc----------

つまり、マウスオーバーでボタンに画像を追加し、それらに hoverintent を使用して、絶対配置要素を持つ分割を開きます。nextHide css は単に display:none;cursor:pointer; です。そして、A、B という名前の HTML div があります... おお、私はこの jQuery が大好きです。

elclarenrs、素晴らしいリンクに感謝します。

于 2012-04-25T21:21:24.347 に答える