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 は非表示になりませんか? これが初心者すぎる場合は申し訳ありませんが、飛び込んで独学しています...