所以我的问题是，当您将鼠标悬停在其中的文本上时，侧菜单会关闭。“关于”文本可以正常工作，而其他三个则不能。原因。当您将鼠标悬停在三行上时，菜单应该会打开，而将鼠标悬停在菜单上时，菜单会保持打开状态。请帮忙
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()">☰</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>最佳答案
您的问题是当您将鼠标移出其中一个时，会触发onmouseout事件。使用onmouseleave代替，因为它不会冒泡。请参见this related post。使用内联处理程序确实不是一个好习惯。您应该改用addEventListener()方法。它看起来像这样：
document.getElementById("sidenav").addEventListener("mouseleave", function(event){
closeNav();
});
关于javascript - 将鼠标悬停在其中的文本上时，侧面菜单消失，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49591004/