無縫mouseenter/mouseleave來自同一類的多個元素

Question

我有一個跨行的表。跨越行中的某些tds具有通過jQuery定位的類，以便在鼠標進入時淡入彈出窗口。當鼠標離開td時，彈出窗口將淡出。

這裏的表：

<table> 
    <tbody> 
     <tr> 
      <td rowspan="2">Some Items</td> 
      <td class="cell-popup">A</td> 
     </tr> 
     <tr> 
      <td class="cell-popup">B</td> 
     </tr> 
    </tbody> 
</table> 

這裏是jQuery的：

var cell = $('.cell-popup'), 
     popup = $('.popup'); 

cell.on({ 
    mouseenter: function(e){ 
     popup.css({ 
      left: e.pageX + 'px', 
      top: e.pageY + 'px' 
     }).fadeIn() 
    }, 
    mouseleave: function(e){ 
     popup.fadeOut(); 
    } 
}); 

的問題是，如何才能讓當鼠標離開當前單元格並進入彈出不隱藏/顯示新的.cell-popup？我想把兩個單元格彈出窗口都視爲「一個」單元格。意思是，如果從任何.cell彈出窗口外面出來並且鼠標進入任何.cell彈出窗口，彈出窗口應該顯示。如果我從一個.cell彈出窗口移動到另一個.cell彈出窗口而不輸入非.cell彈出窗口元素，彈出窗口應該保持在原來的位置。

Answer 1

fadeOut超時後彈出。如果在超時前鼠標進入另一個.cell-popup，請清除超時 - 有效防止fadeOut。

var fadeOutTimer = null; 
cell.on({ 
    mouseenter: function(e){ 
     if(fadeOutTimer) { // already displayed, so clear the timeout 
      clearTimeout(fadeOutTimer); 
      fadeOutTimer = null; 
     } 
     else { 
      popup.css({ 
       left: e.pageX + 'px', 
       top: e.pageY + 'px' 
      }).fadeIn(); 
     } 
    }, 
    mouseleave: function(e){ 
     fadeOutTimer = setTimeout(function() { 
      popup.fadeOut(); 
      fadeOutTimer = null; 
     }, 500); // 500ms 
    } 
}); 

丟棄超時當鼠標進入彈出：

popup.on({ 
    mouseenter: function(e){ 
     if(fadeOutTimer) { // already displayed, so clear the timeout 
      clearTimeout(fadeOutTimer); 
      fadeOutTimer = null; 
     } 
    } 
}); 

Answer 2

你可以使用hover一種方法，在API文檔解釋說：http://api.jquery.com/hover/

$('.cell-popup').hover(
    function(){$('.popup').show();}, 
    function(){$('.popup').hide();} 
);