js怎样让鼠标放到弹出的二级菜单上时不消失呢？

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航</title>
<style type="text/css">
* {
margin: 0;
padding: 0
}

.one,.two,.three,li {
list-style-type: none;
display: block;
background: blue;
text-align: center;
float: left;
height: 30px;
width: 80px;
}

.one,.two,.three,li:hover {
cursor: pointer;
}

a {
color: white;
}

.one,.two,.three {
float: left;
padding: 0;
position: absolute;
}

.one {
left: 20px;
}

.two {
left: 120px;
}

.three {
left: 220px;
}

#area,#time,#age {
float: left;
list-style-type: none;
text-align: center;
height: 30px;
width: 80px;
margin-left: 20px;
}
</style>

<script>
window.onload=function(){

var oNavi=document.getElementById("navi");
var hide1=document.getElementById("hide");

var hide2=hide1.getElementsByTagName("li")
var Aul=oNavi.getElementsByTagName("ul")
var index =0;
for( var i=0;i<hide2.length;i++)
{
hide2[i].index = i;
hide2[i].onmouseover =function(){
Aul[this.index].style.display="block";
}
hide2[i].onmouseout=function(){
Aul[this.index].style.display="none";
}
}
}
</script>
</head>
<body>
<div id="navi"*>
<div id="hide">
<li id="area"><a href="#">地区</a></li>
<li id="age"><a href="#">年龄</a></li>
<li id="time"><a href="#">时间</a></li>
<div style="clear: both"></div>
</div>
<ul style="display:none" class="one">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
<ul style="display:none" class="two">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
<ul style="display:none" class="three">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div>
</body>
</html> 展开

 我来答

1个回答

#热议# 生活中有哪些实用的心理学知识？

虎猫特工
2014-11-16 · TA获得超过147个赞

知道答主

回答量：57

采纳率：0%

帮助的人：34.2万

我也去答题访问个人页

关注

展开全部

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航</title>
<style type="text/css">
* {
margin: 0;
padding: 0
}

.one,.two,.three,li {
list-style-type: none;
display: block;
background: blue;
text-align: center;
float: left;
height: 30px;
width: 80px;
}

.one,.two,.three,li:hover {
cursor: pointer;
}

a {
color: white;
}

.one,.two,.three {
float: left;
padding: 0;
position: absolute;
}

.one {
left: 20px;
}

.two {
left: 120px;
}

.three {
left: 220px;
}

#area,#time,#age {
float: left;
list-style-type: none;
text-align: center;
height: 30px;
width: 80px;
margin-left: 20px;
}
</style>

<script>
window.onload=function(){

var oNavi=document.getElementById("navi");
var hide1=document.getElementById("hide");

var hide2=hide1.getElementsByTagName("li")
var Aul=oNavi.getElementsByTagName("ul")
var index =0;
for( var i=0;i<hide2.length;i++)
{
hide2[i].index = i;
hide2[i].onmouseover = function(){
//alert(this.index);
Aul[this.index].style.display="block";
Aul[this.index].onmouseover = function(){
this.style.display="block";
}
}

hide2[i].onmouseout=function(){
Aul[this.index].style.display="none";
Aul[this.index].onmouseout = function(){
this.style.display="none";
}
}
}
}
</script>
</head>
<body>
<div id="navi">
<div id="hide">
<li id="area"><a href="#">地区</a></li>
<li id="age"><a href="#">年龄</a></li>
<li id="time"><a href="#">时间</a></li>
<div style="clear: both"></div>
</div>
<ul style="display:none" class="one">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
<ul style="display:none" class="two">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
<ul style="display:none" class="three">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div>
</body>
</html>

更多追问追答

追问

大哥  我看你这个代码就多加了一个这个：Aul[this.index].onmouseout = function(){
				this.style.display="none";
   }这是什么意思呢？Aul[this.index].style.display="none"这个已经隐藏了  再写这个有什么用呢？为什么还会显示呢？

追答

hide2[i].onmouseout=function(){
			    Aul[this.index].style.display="none";  //这是隐藏由hide2[i]显示出来的Aul
			    Aul[this.index].onmouseout = function(){    
				    this.style.display="none";    //这是隐藏鼠标经过Aul自身时显示出来的Aul,this指向对象自身
			    } 
		}

本回答被提问者和网友采纳

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

js怎样让鼠标放到弹出的二级菜单上时不消失呢？

其他类似问题

为你推荐：