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 回答