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

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

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

DEMO

Answer 2

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

homeBox.mouseover

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

homeB.onmouseover

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

这是在寻找一个标识为homeSub的儿童的链接，而display: hidden应为display: none

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

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

您已经定义了主页

homeS.style.display = 'block';

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

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

P.S。：hidden属性

没有可用的display值

为什么这个下拉菜单不能与鼠标悬停并离开？

4 个答案: