無法顯示在鼠標位置一個div上的影像地圖

enter image description here

，我試圖展現一個div當我將我創建了一個圖像映射將鼠標懸停在。它僅僅因爲一些奇怪的原因而工作一次，並且隨機工作。此外，我已經注意到，當我第一次將鼠標懸停在圖像地圖上時，會出現某種延遲。此外，代碼不適用於Firefox，而使用Chrome則可以。

這裏是我的代碼至今：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <style> 
      #pipelines{ 
       margin-left:auto; 
       margin-right:auto; 
       margin-top:auto; 
       margin-bottom:auto; 
      } 
      #content{ 
      } 
     </style> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <title>Pipeline</title> 
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    </head> 
    <body> 
     <div id="pipelines"> 
      <img src="2D_Pipeline(Sample).jpg" usemap="#Map" border="0"/> 
      <map name="Map" id="Map"> 
       <area shape="rect" coords="38,41,152,70" href="#" alt="script" /> 
      </map> 
     </div> 
     <div id="content"><h4>Test!</h4></div> 
     <script> 
      $("#Map").on('mouseenter',function(e){ 
       $("#content").show(); 
       $("#content").offset({left:e.pageX,top:e.pageY}); 
      }); 
      $("#Map").on('mouseleave',function(){ 
       $("#content").css("display", "none"); 
      }); 
     </script> 
    </body> 
</html>

有什麼我做錯了，我jQuery的片段？或者我可以使用其他任何東西？

來源

2013-05-21 Mathew Elis

嘗試$（「＃內容」），隱藏（）代替$（「＃內容」），CSS（「顯示」，「無」） –

我使用得到同樣的問題藏起來。（）。 –

嘗試 – GeckoTang

試試這個： http://jsfiddle.net/b9kck/4/

我認爲這個問題是，當你將鼠標移到該內容會認爲你離開地圖，使其隱藏內容。然後它會意識到你再次進入地圖並再次顯示內容......等等等等。

爲了解決這個問題，我在內容中添加了mouseenters和mouseleaves。我添加了延遲來彌補可能發生的任何延遲。像這樣：

$("#content").stop().delay(500).hide();

來源

2013-05-21 05:24:27 nullSharp

*在IE，Chrome和Firefox中測試過。工作。 – nullSharp

我測試了您的建議和eureka，它在Firefox和Chrome上順利運行！萬分感謝！ –

不客氣。感謝您將其標記爲解決方案！ – nullSharp

無法顯示在鼠標位置一個div上的影像地圖

回答

相關問題