javascript - Show or Hide UL based on event handled on another tag or on the previously hidden tag -
i have ul this:
<ul id="nav" class="hide"> <li>apples</li> <li>oranges</li> <li>banana</li> </ul> i have anchor tag this:
<a id="show-ul" href="#">show ul</a> using vanilla js (no jquery):
i need show ul on mouseover , keep ul visible. hide ul if mouse moved on other item: e.g: body or off ul after visible.
preferably mouseout on ul.
using code below: ul hidden mouseout or leave anchor tag. how make ul stay visible until mouseout on ul?
(function() { var showul = document.getelementbyid('show-ul'); var ul = document.getelementbyid('nav'); showul.addeventlistener('mouseover', function(e) { ul.classlist.remove('hide'); }, false); // example: hide ul when mouse out ul.addeventlistener('mouseout', function(e) { ul.classlist.add('hide'); }, false); })(); .hide { display:none } <a id="show-ul" href="#">show ul</a> <ul id="nav" class="hide"> <li>apples</li> <li>oranges</li> <li>banana</li> </ul>
Comments
Post a Comment