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

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/

但是，如果你希望它在mouseout上淡出，请使用.hover作为一种.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）