當鼠標放在它上面時，如何啓用菜單欄

-1

我有一個包含家庭，病人，報告等的菜單。這個菜單應該出現在每個頁面中，它應該出現在每頁的右上角。我知道如何設計這個。現在我想讓它隱藏起來，只有當鼠標放在頁面右上角時纔會顯示。請大家告訴我如何做到這一點。如果你想要菜單欄的代碼，那麼這裏是這個當鼠標放在它上面時，如何啓用菜單欄

<html class="no-js" lang="en-US"> 
    <head> 
<style type="css/text"> 
body{ 
overflow:hidden; 
} 
</style> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
     <title> Home</title> 
     <meta name="author" content="jQuery Foundation - jquery.org"> 
     <meta name="description" content="jQuery: The Write Less, Do More, JavaScript Library"> 
     <meta name="viewport" content="width=device-width"> 
     <link rel="stylesheet" href="base.css"> 
     <script src="jquery.min.js"></script> 
     <script>try{Typekit.load();}catch(e){}</script> 
     <meta name="generator" content="WordPress 3.5.1" /> 
    </head> 
    <body > 
     <header> 
      <section id="global-nav"> 
       <nav> 
        <div class="constrain"> 
         <ul class="links"> 
          <li><a href="template.html" target="content">Home</a></li> 
          <li><a href="createpatient.html" target="content">Patient</a></li> 
          <li><a href="template.html" target="content">Appointments</a></li> 
          <li><a href="template1.html" target="content">Reports</a></li> 
          <li><a href="login.html" target="content">logout</a></li> 
         </ul> 
        </div> 
       </nav> 
      </section> 
     </header> 
    </body> 
</html>

來源

2013-04-12 JavaCoding

您好，我已經打了一個比方的UI希望這有助於第一個例子表明，WhenU的懸停在菜單顯示，但是當你停止包裝盒上的懸停菜單將會消失

http://jsfiddle.net/nFwWG/

$("#righttopbox").on('mouseenter',function(){ 
    $("#global-nav").show(); 
}); 
$("#righttopbox").on('mouseleave',function(){ 
    $("#global-nav").hide(); 
});

第二個節目當u懸停一旦菜單將保持

http://jsfiddle.net/nFwWG/1/

$("#righttopbox").on('mouseenter',function(){ 
    $("#global-nav").show(); 
});

也不要忘記把jquery腳本放在標題上，你可以通過在谷歌jquery google中輸入來使用這個東東。

，或者你可以在

www.jquery.com

希望下載這有助於

來源

2013-04-12 05:42:06 user1706511

看到我何時移動在塊的左邊有一些菜單出現在您的代碼中，但是當我移動鼠標點擊鏈接時，它會消失。請編輯代碼 – JavaCoding

假設global-nav是在右上角

JS：

$("#global-nav").mouseenter(function(){ 

    $(".links", this).show(); 
}).mouseleave(function(){ 

    $(".links", this).hide(); 
});

CSS：

#global-nav .links { 
    display:none; 
}

來源

2013-04-12 04:36:25 Anoop

這也可能是適當給予_.links_絕對定位和更高超的休息z-index，這樣當它出現時它會覆蓋其他元素，而不是將它們推下來騰出空間。 – nnnnnn

它建議使用'ctx.find（選擇器）'比'$（選擇器，ctx）'更後者最終轉換爲前者，但是您正在執行一系列不必要的步驟以便到達那裏 –

如果它是隱藏的，並且想在鼠標右上角顯示它時，那麼您可能必須使用mousemove事件上的JavaScript或body等。然後檢查鼠標座標，如果它位於預定義的範圍內（右上角），則顯示菜單。正如你所看到的e.screenX和e.screenY會給你相對於屏幕的鼠標座標。

來源

2013-04-12 04:37:24 Rishabh

當鼠標放在它上面時，如何啓用菜單欄

回答

相關問題