在悬停时切换下一个元素

fadeToggle next element in on hover

本文关键字：下一个 元素 悬停      更新时间：2023-09-26

我有下面的代码来显示下一个元素在dom上点击，我想把这个相同的代码转换成我可以使用一个简单的悬停事件。jQuery是否有一个简单的方法来做这样的事情，或者我应该使用.bind()到mouseover和mouseout事件?我知道这应该很简单，我可能只是没有想清楚。

$('#el').click(function(e){
    e.preventDefault();
    var $prevEl =   $(this).parent().find('.prev-el');
    $prevEl.fadeToggle();
});

需要提及的一件事是，我希望$prevEl在悬停触发#el元素后保持可见。做这件事最好的办法是什么?

提前谢谢你

DT

您可以使用$('#el').mouseover(...而不是$('#el').click(...，但当您使用mouseover时，您应该使用fadeIn而不是fadeToggle:

$('#el').mouseover(function(e) {
    var $prevEl = $(this).parent().find('.prev-el');
    $prevEl.fadeIn();
});
http://jsfiddle.net/mblase75/eXjTb/3/

如果你想让它在鼠标退出时淡出，使用.hover作为一种简便的方法将两者结合起来，并保留fadeToggle:

$('#el').hover(function(e) {
    var $prevEl = $(this).parent().find('.prev-el');
    $prevEl.fadeToggle();
});
http://jsfiddle.net/mblase75/eXjTb/2/

应该可以:

$('#el').mouseover(function(){
    $(this).parent().find('.prev-el').fadeIn();
});
顺便说一下，你可以使用。next()和。prev()代替.parent().find(...)(取决于你的html)
相关文章：