当鼠标放在它上面时，如何启用菜单栏

-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

当鼠标放在它上面时，如何启用菜单栏

回答

相关问题