javascript - 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/