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(...，但在使用fadeIn时应使用fadeToggle代替mouseover：

$('#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）