未在Div中出現的文本

-1

我試圖在用戶懸停在創建的圖像映射上時顯示名爲「內容」的div。此外，我還嘗試將它的Visibility屬性Hidden更改爲Show，當用戶將鼠標懸停在地圖上時，它的效果並不理想。未在Div中出現的文本

此外，我還有一個名爲「成員」的div，我想保留在圖像的右側。

擺弄這些屬性會導致文本突然消失。爲什麼會發生&我該如何解決它？

這裏是我的代碼：

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <style> 
      #pipelines { 
       margin-left: auto; 
       margin-right: auto; 
       margin-top: auto; 
       margin-bottom: auto; 
       float:left; 

      } 
      #content { 
       font-family: Helvetica Neue; 
       border: solid; 
       padding-left: 10px; 
       padding-right:10px; 
       border-radius: 2px; 
       background-color: white; 
       position: relative; 
       width: 20%; 
       height: 0; 
       padding-bottom: 20%; 

      } 
      hr{ 
       background-color:#000; 
      } 
      h4{padding-bottom:0px; 
      padding-top:0px;} 
      #members{ 
       float:right; 
       position:relative; 
      } 

     </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.jpg" usemap="#Map" border="0"/> 
      <map name="Map" id="Map"> 
       <area shape="rect" coords="155,70,267,96" href="#" alt="Writers" /> 
      </map> 


     </div> 
     <div id="members"><h1>Mem</h1></div> 
     <div id="content"> 
      <h4></h4> 
      <hr /> 
      John Howard 
     </div> 
     <script> 

      $("#Map").on('mouseenter', function(e) { 
       //$("#content").css("visibility", "show"); 
       $("#content").stop().show(); 
       $("#content").offset({ 
        left : e.pageX, 
        top : e.pageY 
       }); 
       var alt_script = $("area").attr("alt"); 
       $("#content h4").html(alt_script); 
      }); 

      $("#content").on('mouseenter', function(e) { 
       //$("#content").css("visibility", "show"); 
       $("#content").stop().show(); 

      }); 

      $("#Map").on('mouseleave', function(e) { 
       $("#content").stop().delay(500).hide(); 
      }); 

      $("#content").on('mouseleave', function(e) { 
       $("#content").stop().delay(500).hide(); 
      }); 

     </script> 
    </body> 
</html>

而且這裏是我使用的圖像：http://imgur.com/eJK42SZ :)

來源

2013-06-19 Mathew Elis

delay()不hide()或show()工作，除非你提供一個寬鬆/動畫隊列。

delay()只排隊下一個動畫，而且由於像hide()這樣的方法是即時（而不是動畫），它們不在隊列中，因此不會延遲。

你可以做

var timer = setTimeout(function() { $('#id').hide(); }, 500);

並使用clearTimeout(timer);，以防止函數執行什麼。

來源

2013-06-19 21:24:04

所以基本上，我應該刪除.delay（）？ –

這是你想要的東西，還是我錯過了什麼？

http://jsfiddle.net/blackjim/3NShg/3/（Ctrl + Shift + Enter鍵，看看它在瀏覽器窗口）

$("#pipelines") 
.on('mouseenter', function (e) { 
    // setTimeout here if you want and change fadeIn to show(); 
    $('#content').fadeIn(400); 
}) 
.on('mouseleave', function (e) { 
    $('#content').fadeOut(400) 
});

來源

2013-06-19 21:51:07 AntouanK

其實，我用Overflow: Hidden &調整其他屬性很好地解決了這個奇怪的問題。

對於那些回答，謝謝你們的幫助。 :)

來源

2013-06-20 10:31:00

未在Div中出現的文本

回答

相關問題