Question

我有一个包含家庭，病人，报告等的菜单。此菜单应该出现在每个页面中，并且应该出现在每个页面的右上角。我知道如何设计它。现在我想把它隐藏起来，只有当鼠标放在页面的右上方时它才会显示。请大家告诉我怎么做。如果你想要菜单栏的代码那么这是

<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>

Answer 1

假设global-nav位于右上方

JS：

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

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

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

CSS：

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

Answer 2

如果它是隐藏的并且您希望在鼠标位于右上角时显示它，那么您可能必须在body上使用带有mousemove事件的JavaScript等。然后检查鼠标坐标，如果它在预定义的范围内（右上角），则显示菜单。正如您所看到的，e.screenX和e.screenY将为您提供相对于屏幕的鼠标坐标。

Answer 3

嗨我已经为你做了一个例子我希望这有助于第一个例子显示当我将鼠标悬停在菜单上时，但当你停止在盒子上悬停时，菜单将会消失

http://jsfiddle.net/nFwWG/

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

第二个显示，当您将菜单停留时，您将悬停

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

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

也不要忘记将jquery脚本放在标题上，您可以通过在google jquery google中键入谷歌来托管这个标题。

或者您可以在

下载

www.jquery.com

希望这会有所帮助

如何在鼠标放置上启用菜单栏

3 个答案: