为什么这个下拉菜单不能与鼠标悬停和离开一起使用？

Question

我希望鼠标悬停时在"Home"下方显示"you"，鼠标离开时消失：

// HTML
<ul>
<li><a id="homeBox" href="#">Home</a>
<ul><li><a id="homeSub" href="#">you</a></li></ul>
</li>
</ul>

// javaScript
var homeB= document.getElementById("homeBox");
var homeS = document.getElementById("homeSub")
homeBox.mouseover = function() {
    var homeS = document.getElementById("homeSub").style.display= "block";
}
homeBox.mouseleave = function() {
    var homeS = document.getElementById("homeSub").style.display= "none";
}
// CSS
<style>
    ul li ul li a #homeSub {display: hidden;}
</style>

Answer 1

有很多问题。如果您有任何问题，请告诉我

homeBox.mouseover

没有 homeBox 使用 homeB，并且 mouseover 不是事件处理程序 onmouseover 是。

homeB.onmouseover

---

ul li ul li a #homeSub {display: hidden;}

这是在寻找具有 ID homeSub 的 child 的 link，并且 display: hidden 应该是 display: none

ul li ul li a#homeSub {display: none;}

---

var homeS = document.getElementById("homeSub").style.display= "block";

您已经定义了 homeS

homeS.style.display = 'block';

---

var homeB = document.getElementById("homeBox");
var homeS = document.getElementById("homeSub");
homeB.onmouseover = function() {
    homeS.style.display = "block";
}
homeB.onmouseout = function() {
    homeS.style.display = "none";
}

ul li ul li a#homeSub {
    display: none;
}

<ul>
<li><a id="homeBox" href="#">Home</a>
<ul><li><a id="homeSub" href="#">you</a></li></ul>
</li>
</ul>

Answer 2

<ul>
<li><a id="homeBox" href="#">Home</a>
<ul><li><a id="homeSub" href="#">you</a></li></ul>
</li>
</ul>

-使用onmouseover代替mouseover

-将您的 Javascript 放在脚本标签之间，并放在将在页面加载后执行的函数中（并使用 'none' 而不是 'hidden'）。

<script>
(function() {
    var homeB= document.getElementById("homeBox");

    var homeS = document.getElementById("homeSub");

    homeB.onmouseover = function() {
        homeS.style.display = "block";
    }
    homeB.onmouseleave = function() {
        homeS.style.display= "none";
    }
})();
</script>

-并调整您的样式表：

<style>
    #homeSub {display: none;}
</style>

Answer 3

为什么Javascript？使用简单的 CSS 解决方案。

  ul li ul{display: none;}
  ul li:hover ul{display: block;}

DEMO

Answer 4

此功能不需要任何 javascript。只需使用 CSS - http://jsfiddle.net/akq1e5o6/

P.S.: display 属性

没有可用的 hidden 值