confused with working of mouse events .onmouseleave

Question

here is HTML code

<div id="_navigation">
            <ul>
                <li>Destinations</li>
                <li><a href="HtmlPage.html">Culture</a></li>
                <li><a href="HtmlPage.html">Adventure</a></li>
                <li><a href="HtmlPage.html">Hotels</a></li>
                <li><a href="HtmlPage.html">Wild Life</a></li>
                <li><a href="HtmlPage.html">History</a></li>
                <li><a href="HtmlPage.html">About</a></li>
            </ul>
            <div id="_subNavigation">
                <div id="_navigationFirst">
                    this is first subnavigation it must be showed when user clicks on Distinations
                </div>
                <div id="_navigationSecond">
                    this is second subnavigation it must be showed when user clicks on Culture
                </div>
                <div id="_navigationThird">
                    this is third subnavigation it must be showed when user clicks on Adventure
                </div>
            </div>
        </div>

I apply some CSS on it after that it looks like this enter image description here forget other things in CSS... in CSS div with id _subNavigation is set display:none; Using java script i want that when someone clicks on Destination then _navigationFirst(it's an id) becames visible and when user takes mouse out of navigation region it goes out(became invisible).. I am succeded in making it visible when user clicks on it but it doesn't goes out when user takes mouse out of navigation region.. Here is my javascipt

I get such desired image when i click on Destination enter image description here

"use strict";
document.getElementById("_navigation").getElementsByTagName("ul")[0].getElementsByTagName("li")[0].onclick = function () {
    console.log("got into block");
    document.getElementById("_navigationFirst").style.display = "block";
}
document.getElementById("_navigation").onmouseleave = function () {
    console.log("you left _navigation block");
    document.getElementById("_navigationFirst").style.display = "none";
}

So CodeGurus where am i wrong? and how to get effect that i am trying to get

score 0 · Answer 1 · edited May 23 '17 at 12:13

document.getElementById("_navigation").onmouseout = function () {
    console.log("you left _navigation block");
    document.getElementById("_navigationFirst").style.display = "none";
}

Change it to "onmouseout ". I'm not sure "onmouseout" is the effect you want. You can look at the difference between onmouseleave and onmouseout. If you need "onmouseleave" effect, you have to rely on jquery because javascript does not have built-in support for "onmouseleave". Working fiddle is here.

confused with working of mouse events .onmouseleave

1 Answers1