javascript - Nav <ul> 是 mouseout 吗？怎么修

<分区>

我不是最擅长措辞我的问题，抱歉。我正在尝试制作一个 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>

脚本运行良好，正如我所希望的那样。我遇到的唯一问题是，当我尝试将鼠标悬停在列表项上时，hide() 函数运行，就好像它需要我以鼠标移出的方式输入 UL。

附言我目前正在学习 JS，所以在做出判断时请记住这一点。

最佳答案

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

#sidebar {
  background: blue;
}
#sidenav {
  background: red;
  display: none;
}
#parent:hover #sidebar {
  display: none;
}
#parent:hover #sidenav {
  display: block;
}

<div id="parent">
  <div id="sidebar">""</div>
  <nav id="sidenav">""</nav>
</div>

通过这种方式可以改进很多东西，但这是一个好的开始。

关于javascript - Nav <ul> 是 mouseout 吗？怎么修，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29152756/

上一篇：javascript - 有没有办法在 ng-repeat 中使用 $index in angular 作为模型？

下一篇：javascript - ajax 将数据从客户端(js)发送到服务器(php)

html - CSS3 Crossfading 各种图像

javascript - 如何从一个 html 文件加载所有 CSS 和 JS？

css - 什么覆盖了这个 css 规则？

javascript - JavaScript 中是否有一种方法可以检索*将*与表单一起发送而无需提交的表单数据？

JavaScript : Change the function of the browser's back button

Javascript onclick函数错误无法读取未定义的属性 'inv'

html - 将 CSS 样式的表单元素还原为默认浏览器样式

javascript - 异步: Why is form post redirecting?

html - 更改所选 li 元素的背景颜色