Nav
is mouseout? How to fix

Question

I am not the best at wording my questions, sorry. I am trying to make a sidenav which displays when you hover over a small strip on the side of the screen, then disappears on mouse out.

<!--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>

Then I used some css to put them on the side and make them look pretty. Next, I added some 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>

The scirpt works fine, just as I want it to. The only problem I am running into is that when I try to hover over the list items, the hide() function runs, as if it takes me entering the UL as a mouseout.

P.S. I am currently in the process of learning JS so please bare that in mind when making judgment calls.

This is probably something better handled with CSS. CSS has `:hover` and the `+` sibling selector. — Madara's Ghost, Mar 19 '15 at 18:56
Yup, CSS is capable of a lot of things: http://tympanus.net/Development/SidebarTransitions/ — Roope, Mar 19 '15 at 18:59
That's really odd, since you're not calling `hide()` anywhere in your posted code. — Teemu, Mar 19 '15 at 18:59
Really hard to know what you are trying to accomplish here. Maybe put up a working example by using the code snippet. — talves, Mar 19 '15 at 19:59
Oh, thank you lol that was a typo. But I got answers so I'm sure it was understood. — Dr. Owning, Mar 20 '15 at 13:07

score 3 · Accepted Answer · answered Mar 19 '15 at 19:00

3

A very simplistic solution with 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>

There a lot of things that can be improved on from this way, but it's a good start.

answered Mar 19 '15 at 19:00

Madara's Ghost

172,118
50
264
308

Thank you. I considered doing this from the start, but wasn't sure how to go about it and/or if there was a better way to do it. Seeing it actually put to action though, it's really simple and easy to work with. – Dr. Owning Mar 20 '15 at 13:06

Nav is mouseout? How to fix

1 Answers1

Nav
is mouseout? How to fix