html+css+js 鼠标放在页面顶部则导航栏出现 鼠标移出则隐藏

html：

<div class="top" id="top"></div>
<div class="nav" id="nav">
  <div class="img1" @click="toroute(1)"></div>
  <div class="img2" @click="toroute(2)"></div>
  <div class="img3" @click="toroute(3)"></div>
</div>

css：

// 导航
.nav {
  display: flex;           /*固定定位*/
  justify-content: center;  /*元素以容器右边缘为基准，一个挨着一个对齐*/
  align-items: center;      /*让文字垂直居中*/
  width: 100%;
  height: 98px;
  font-size: 2em;
  transition: top .4s linear;  /*导航栏过渡出现和隐藏*/
  position: fixed;   /* 绝对定位，不管滚动条上下滚动都在相应的位置*/
  top: -98px;        /*隐藏导航栏*/
  left: 0;
  background-image: url('....');
  background-size: 100% 98px;
  background-repeat: no-repeat;
  z-index: 2000;

  .img1 {
    width: 50px;
    height: 50px;
    margin-right: 70px;
    background-image: url('....);
    background-size: 50px 50px;
    background-repeat: no-repeat;
    cursor: pointer;
  }
  .img2 {
    width: 46px;
    height: 48px;
    margin-right: 70px;
    background-image: url('....');
    background-size: 46px 48px;
    background-repeat: no-repeat;
    cursor: pointer;
  }
  .img3 {
    width: 44px;
    height: 50px;
    margin-right: 40px;
    background-image: url('....');
    background-size: 44px 50px;
    background-repeat: no-repeat;
    cursor: pointer;
  }
}
.top {
  position: fixed;    /*固定定位*/
  width: 100%;
  height: 20px;
  right: 0;
  top: 0;
}

js:

注意：

当鼠标移入DIV内部的Img或其它元素上时，内部元素的mouseover事件被触发。但是再次将鼠标移动到DIV内部的另一个内部元素时，却会发现首先被触发的是DIV的mouseout事件，紧接着才是当前这个元素的mouseover事件。

解决：使用setTimeout。

当鼠标触发外层的mouseout事件时，开始计时Settimeout,一段时间后再去执行mouseout需要执行的函数；这段时间是为了判断鼠标是否移动到了其内部元素。

当鼠标mouseover到了内部元素上时，这时候会触发它本身以及外层的mouseover事件，这时需先清除鼠标移出事件的函数。

// 导航栏
nav () {
  // 获取导航栏、按量、顶部div的元素
  const nav = document.getElementById('nav')
  const top = document.getElementById('top')
  const img1 = document.getElementsByClassName('img1')[0]
  const img2 = document.getElementsByClassName('img2')[0]
  const img3 = document.getElementsByClassName('img3')[0]
  let timer = null
  // console.log(nav, img1);
  // 鼠标移入div后触发的事件
  top.onmouseover = function () {
    nav.style.top = '0px'
  }
  // 鼠标移入导航栏触发的事件 当触发onmouseover事件时，需先清除鼠标移出事件的函数
  nav.onmouseover = function () {
    clearTimeout(timer)
    nav.style.top = '0px'
  }
  img1.onmouseover = function () {
    clearTimeout(timer)
    nav.style.top = '0px'
  }
  img2.onmouseover = function () {
    clearTimeout(timer)
    nav.style.top = '0px'
  }
  img3.onmouseover = function () {
    clearTimeout(timer)
    nav.style.top = '0px'
  }
  // 鼠标移出导航栏后触发的事件
  nav.onmouseout = function () {
    // 定时器函数
    timer = setTimeout(function () {
      nav.style.top = '-98px'
    }, 500)
  }
},
// 导航栏跳转
toroute (target) {
  switch (target) {
    case 1:
      this.$router.push('/')
      break;
    case 2:
      this.$router.push('/overview')
      break;
    case 3:
      this.$router.push('/traffic')
      break;
  }
},