Javascript 导航<；ul>；是老鼠屎吗？如何修复

对不起，我不擅长用措辞回答我的问题。 我试图制作一个sidenav，当你将鼠标悬停在屏幕一侧的一个小条带上时，它会显示出来，然后在鼠标离开时消失

<!--the small bar on the side-->
<div id="sidebar"></div>

<!--the nav to display-->
<nav id="sidenav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
</ul>
</nav>

家
关于

然后我用一些css把它们放在一边，让它们看起来很漂亮。接下来，我添加了一些JS：

<div id="sidebar" onmouseenter="show()">""</div>
<nav id="sidenav" onmouseout="hide()">""</nav>

<script>
function show() {
    document.getElementById("sidebar").style.display = "none";
    document.getElementById("sidenav").style.display = "block";
}

function hide() {
    document.getElementById("sidebar").style.display = "block";
    document.getElementById("sidenav").style.display = "none";
}
</script>

“”
""
函数show（）{
document.getElementById（“侧栏”）.style.display=“无”；
document.getElementById（“sidenav”）.style.display=“block”；
}
函数hide（）{
document.getElementById（“侧栏”）.style.display=“块”；
document.getElementById（“sidenav”）.style.display=“无”；
}

scirpt工作正常，正如我所希望的那样。我遇到的唯一问题是，当我尝试将鼠标悬停在列表项上时，hide（）函数会运行，就好像它将我作为鼠标出键输入UL一样

---

另外，我目前正在学习JS，所以在进行判断时请牢记这一点。

一个非常简单的CSS解决方案：

#侧边栏{
背景：蓝色；
}
#侧导航{
背景：红色；
显示：无；
}
#父项：悬停#侧边栏{
显示：无；
}
#父项：悬停#侧导航{
显示：块；
}

""
""

使用CSS可能会更好地处理这一点。CSS有

：hover

和

+

同级选择器。是的，CSS有很多功能：这真的很奇怪，因为你没有在你发布的代码中的任何地方调用

hide（）

。真的很难知道你想在这里实现什么。也许可以通过使用代码片段来展示一个工作示例。哦，谢谢你，哈哈，这是一个打字错误。但我得到了答案，所以我相信大家都明白了。谢谢。我从一开始就考虑过这样做，但不知道该怎么做，也不知道是否有更好的方法。但是，看到它实际付诸实施，它确实很简单，也很容易使用。