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）