Javascript 与鼠标事件的工作混淆。onmouseleave
下面是HTML代码Javascript 与鼠标事件的工作混淆。onmouseleave,javascript,dom,Javascript,Dom,下面是HTML代码 <div id="_navigation"> <ul> <li>Destinations</li> <li><a href="HtmlPage.html">Culture</a></li> <li><a href="HtmlPage.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>
那么CodeGurus我错在哪里?以及如何获得我想要的效果
将其更改为“onmouseout
”。我不确定“onmouseout”是不是你想要的效果。你可以看看。如果需要“onmouseleave”效果,就必须依赖jquery,因为javascript没有内置的对“onmouseleave”的支持。我在这里工作
"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";
}
document.getElementById("_navigation").onmouseout = function () {
console.log("you left _navigation block");
document.getElementById("_navigationFirst").style.display = "none";
}