fade在悬停时切换下一个元素

Question

我有以下代码来显示 dom 中单击时的下一个元素，我想将相同的代码转换为可用于简单悬停事件的代码。 jQuery 是否有一个简单的方法来执行类似的操作，或者我应该使用 .bind() 来 mouseover 和 mouseout 事件？我知道这应该很简单，我可能只是没有思考清楚。

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

值得一提的是，我希望 $prevEl 在悬停触发 #el 元素后保持可见。解决这个问题的最佳方法是什么？

提前谢谢你，

DT

Answer 1

您可以使用 $('#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/

Answer 2

这应该有效：

$('#el').mouseover(function(){
    $(this).parent().find('.prev-el').fadeIn();
});

顺便说一下，您可以使用 .next() 和 .prev() 而不是 .parent().find(...) （取决于您的html)