html - 在访问者移动鼠标之前隐藏的主菜单

Question

我想这样做:

我有视频背景的网站。我想隐藏主菜单，直到访问者移动鼠标。 鼠标移动后，它将永远保持可见状态。

菜单在单独的文件中:'header.inc.php'

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
    <a class="navbar-brand" href="#Uvod"><img src="img/logo.jpg" width="100%"></a>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div class="collapse navbar-collapse" id="myNavbar" >
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#o-nas">O SPOLEČNOSTI</a></li>
        <li><a href="#sluzby">SLUŽBY</a></li>
        <li><a href="#reference">REFERENCE</a></li>
        <li><a href="#kontakt">KONTAKT</a></li></ul>
    </div> </div></nav>

Link to jsfiddle

Answer 1

虽然最好能得到一个示例，但我已经为您整理了一个快速的 JSFiddle，它演示了一种简单的方法:https://jsfiddle.net/tmaLjsvu/1/

使用 jQuery 检测鼠标移动相当容易，您可以使用 $(document).mousemove 检测整个页面上的任何鼠标移动。

此示例只是向您的菜单添加一个类，将其从 display:none 更改为 display:block。