jQuery mouseenter mouseleave工具提示

Question

我已經嘗試了以下兩種方法來顯示每個div具有類名稱頭像帶有隱藏的內容。

<div class="avatar"><a><img src="avatar.png" width="36" height="36"><div class="profile">Users Profile with Link</div></a></div> 

第一個使用懸停和完美的作品時，我有頁面上的多個虛擬形象元素。

不幸的是，工具提示內置了可點擊的鏈接，懸停不允許我點擊鏈接。

$('.avatar a').hover(function() { 
     $(this).contents('div:last-child').css({ 
      display : 'inline' 
     }); 
    }, function() { 
     $(this).contents('div:last-child').css({ 
      display : 'none' 
     }); 
    }); 

不幸的是，工具提示內置了一個可點擊的鏈接，懸停不允許我點擊鏈接。

我拼湊在一起的編碼，我發現這裏使用mouseenter和mouseleave。這一個也適用，它允許我點擊鏈接。

var hover = null; 
    $('.avatar a').bind('mouseleave', function() { 
     var $this = $(this).contents('div:last-child'); 
     hover = setTimeout(function() { 
      $this.fadeOut(400); 
     }, 800); 
    }); 

    $('.avatar a').bind('mouseenter', function() { 
     $(this).contents('div:last-child').css({display:'block'}); 
     if (hover !== null) { 
      clearTimeout(hover); 
     } 
    }); 

不幸的是，如果您將鼠標放在這些頭像中的多個頭像上，只有最後一個頭像被移除，而其他頭像會一直保留。

我的問題是我如何使用第二個將fadeOut當我移動到另一個工具提示？

我錯過了什麼嗎？還是完全做錯了？

Answer 1

如果我理解正確，我認爲你想要的是每個提示都有超時。您可以使用.data通過將超時與每個提示關聯來實現此目的。

$('.avatar a').on('mouseleave', function() { 
    var $tip = $(this).contents('div:last-child'); 
    $tip.data('hover', setTimeout(function() { 
     $tip.fadeOut(400); 
     $tip.removeData('hover'); 
    }, 800)); 
}); 

$('.avatar a').on('mouseenter', function() { 
    var $tip = $(this).contents('div:last-child').show(); 
    var hover = $tip.data('hover'); 
    if (hover) { 
     clearTimeout(hover); 
     $tip.removeData('hover'); 
    } 
}); 

Live demo on jsfiddle

注：我也改變.bind()到.on()因爲.bind()已被棄用，我改變了它使用.show()。

原始代碼中發生的事情是，當您對第二個提示進行盤旋時，第一個提示的超時被清除，因爲它們都共享相同的「懸停」變量。

編輯：在我匆忙中，我錯誤地清除了.data值。我應該一直在使用.removeData()。我已經修復了上面的代碼。

Updated demo on jsfiddle

Answer 2

問題是在你的超時功能..爲什麼你甚至使用它？ http://jsfiddle.net/24MYq/9/ 刪除：

if (hover !== null) { 
    clearTimeout(hover); 
} 

這不就是你需要什麼，或者你需要的是延遲？如果你真的需要它，我會編輯我的文章，並給你一些工作上的延遲。

E：對於延遲或者更高的淡出（內部編號）或添加.delay（號碼）之後，而數量是一個int值（500 - >半秒）

Answer 3

如果你希望他們所有的被刪除，當你鼠標移開，你可以通過改變 var $this = $(this).contents('div:last-child') 這樣做 var $this = $('.profile');

所有的提示將在同一時間消失，超時會，只要你鼠標重置在另一個化身的形象，雖然。