Question

所以我的问题是，当你将鼠标悬停在其中的文本上时，侧边菜单会关闭...“关于”文字正常工作，但其他三个没有...我尝试了不同的解决方案，但我无法想象出于什么原因。当您将鼠标悬停在3条线上时，菜单应该打开，并且当您将鼠标悬停在它上面时保持打开状态。请帮忙

function openNav() {
  document.getElementById("sidenav").style.width = "250px";
  document.getElementById("menubtn").style.color = "transparent";
  document.getElementById("menubtn").style.transition = "0.2s";
  document.body.style.backgroundColor = "#a5a5a5";
}

function closeNav() {
  document.getElementById("sidenav").style.width = "0";
  document.getElementById("menubtn").style.color = "#ffffff";
  document.getElementById("menubtn").style.transition = "0.6s";
  document.body.style.backgroundColor = "#ffffff";
}

body {
  margin: 0;
  padding: 0;
  transition: background-color 0.5s;
}

.navbarheader {
  height: 80px;
  width: 100%;
  margin: 0px;
  padding: 0px;
  background-color: #1f1f1f;
}

.menubtn {
  margin: 14px 0px 0px 23px;
  padding: 0px;
  font-size: 37px;
  transform: scale(1, 0.8);
  float: left;
  color: #ffffff;
  background-color: #1f1f1f;
  border: none;
}

.sidenav {
  height: 100%;
  width: 0px;
  position: fixed;
  background-color: #1f1f1f;
  transition-property: width;
  transition-duration: 0.5s;
}

.sidenav a {
  margin: 0px;
  padding: 10px 0px 10px 25px;
  text-decoration: none;
  font-size: 25px;
  color: #ffffff;
  overflow: hidden;
  display: block;
}

.sidenav a:hover {
  color: #a5a5a5;
}

<body>
  <div class="navbarheader">
    <div><button id="menubtn" class="menubtn" onMouseover="openNav()">&#9776;</button></div>
  </div>

  <div id="sidenav" class="sidenav" onMouseout="closeNav()">
    <a style="padding-top: 20px" href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
  </div>
</body>

Answer 1

也许是一种CSS方法，而不是JS方法。

例如，考虑删除所有JS代码。然后，将CSS设置如下：

.sidenav {
  visibility: hidden;
}

.sidenav:hover {
  visibility: visible;
  display: block;
}

Answer 2

您的问题是，当您将鼠标移出其中一个孩子时，onmouseout事件会被触发。请使用onmouseleave，因为它不会冒泡。见this related post。但是，使用内联处理程序确实不是一个好习惯。您应该使用addEventListener()方法。它看起来像这样：

document.getElementById("sidenav").addEventListener("mouseleave", function(event){
    closeNav();
});

将鼠标悬停在其中的文本上时，侧边菜单会消失

2 个答案: