与鼠标事件 .onmouseleave 的工作混淆答案

【问题标题】：confused with working of mouse events .onmouseleave与鼠标事件 .onmouseleave 的工作混淆
【发布时间】：2013-05-25 07:10:42
【问题描述】：

这里是 HTML 代码

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

我在它上面应用了一些 CSS，它看起来像这样忘记CSS中的其他东西...... 在 ID 为 _subNavigation 的 CSS div 中设置 display:none; 使用java脚本我希望当有人点击Destination时_navigationFirst（它是一个id）变得可见，当用户将鼠标移出导航区域时它会熄灭（变得不可见）.. 我成功地使它在用户单击它时可见，但是当用户将鼠标移出导航区域时它不会熄灭。这是我的 javascipt

当我点击目的地时，我得到了这样想要的图像

"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";
}

所以 CodeGuru 我哪里错了？以及如何实现我想要的效果

【问题讨论】：

标签： javascript dom

【解决方案1】：

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

将其更改为“onmouseout”。我不确定“onmouseout”是你想要的效果。你可以看看the difference between onmouseleave and onmouseout。如果您需要“onmouseleave”效果，则必须依赖 jquery，因为 javascript 没有对“onmouseleave”的内置支持。工作fiddle 在这里。

【讨论】：