为什么不;t使用鼠标悬停并离开此下拉菜单

why doesn't this drop-down menu work with mouseover and leave?

本文关键字：离开 下拉菜单 悬停 鼠标 为什么不      更新时间：2023-09-26

我希望它在悬停时在"主页"下显示"你"，在鼠标离开时消失：

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

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

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

DEMO

出现了不少问题。如果你有任何问题，请告诉我

homeBox.mouseover

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

homeB.onmouseover

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

这是在寻找一个与id为homeSub的子级的链接，而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>

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

第页。S.：display属性没有可用的hidden值

<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>
相关文章：