Question

对我的问题，我不是最好的，对不起。我试图制作一个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>

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

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

有许多事情可以通过这种方式得到改善，但这是一个良好的开端。

导航<ul>是鼠标输出？如何修复</ul>

1 个答案: