js溢出函數溢出

Question

我已經設置了我的頁面，這樣當用戶將鼠標懸停在圖像上時，文本就會出現並顯示一些泡泡。有十一個魚的圖像，每個人都有自己的文字和泡泡。我確定在包含魚的div中沒有​​重疊，但是當一個鼠標懸停在特定圖像上時，其他圖像的文本也顯示出來。這太讓人分心了，因爲用戶一次只想看到一個文本。我該如何解決這個問題？以下是該頁面的鏈接：http://arabic001.com/colors

Answer 1

我很好奇自己，對於這個問題常見的解決方案是什麼。 當我遇到這種情況時，我使用jQuery的hoverIntent插件。

，如果你去這條路線，你會改變每個.mouseOver(),.mouseOut()以下幾點：

從這個

  $('#fishBlue').mouseover(function() {  
       $('#bubblesBlue').toggle('slow'); 
       $('#textBlue').toggle('slow'); 
      }); 

      $('#fishBlue').mouseout(function() {     
       $('#bubblesBlue').hide('slow'); 
       $('#textBlue').toggle('slow'); 
      }); 

這個

$('#fishBlue').hoverIntent(function() { 
       $('#bubblesBlue').toggle('slow'); 
       $('#textBlue').toggle('slow'); 
      }); 
}, function() { 
       $('#bubblesBlue').hide('slow'); 
       $('#textBlue').toggle('slow') 
}); 

注

的hoverIntent plu杜松子酒至少需要的jQuery 1.5.1

其他尖端

我將抽象的東西多一點，爲什麼改寫爲每條魚一樣的東西。

也許使用類

$('.fish').hoverIntent(function() { 
       $(this).next('.bubble').toggle('slow'); 
       $(this).next('.text').toggle('slow'); 
      }); 
}, function() { 
       $(this).next('.bubble').hide('slow'); 
       $(this).next('.text').toggle('slow') 
});