发新贴  快速回复

请老师看一下我的作业!功能有些问题,一个一个移入移除时可以实现,但当倒着移入li时就不能实现了,不知怎么回事了?

李宁认真学习
2017-11-14 21:12

<!DOCTYPE html>

<html>

 

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

ul,

li {

margin: 0;

padding: 0;

}

 

#qq {

width: 400px;

height: 50px;

background: hotpink;

}

 

#qq li {

float: left;

list-style: none;

margin-right: 20px;

line-height: 50px;

;

}

 

.title {

width: 300px;

height: 30px;

background: powderblue;

display: none;

position: absolute;

top: 70px;

left: 10px;

}

 

.title li {

float: left;

margin-right: 20px;

list-style: none;

line-height: 30px;

 

}

</style>

<script>

window.onload = function() {

var qq = document.getElementById("qq");

var aLi = qq.getElementsByTagName("li");

var title = document.getElementById("title");

var aDiv = title.getElementsByTagName("div");

var timer = null;

for(var i = 0; i < aLi.length; i++) {

aLi[i].index = i;

aDiv[i].index = i;

aLi[i].onmouseover = show;

aLi[i].onmouseout = hide;

 

aDiv[i].onmouseover = show;

aDiv[i].onmouseout = hide;

 

}

 

function hide() {

timer = setTimeout(function() {

for(var i = 0; i < aDiv.length; i++) {

aDiv[i].style.display = "none";

}

}, 200)

}

 

function show() {

clearTimeout(timer)

aDiv[this.index].style.display = "block";

}

 

}

</script>

 

</head>

 

<body>

<div id="qq">

<ul>

<li>

<a href="javascript:;">首页</a>

</li>

<li>

<a href="javascript:;">关于我们</a>

</li>

<li>

<a href="javascript:;">作品</a>

</li>

<li>

<a href="javascript:;">博客</a>

</li>

</ul>

</div>

 

<div id="title">

<div class="title">

<ul>

<li>

<a href="javascript:;">1111</a>

</li>

<li>

<a href="javascript:;">1111</a>

</li>

<li>

<a href="javascript:;">1111</a>

</li>

<li>

<a href="javascript:;">1111</a>

</li>

</ul>

</div>

<div class="title">

<ul>

<li>

<a href="javascript:;">222</a>

</li>

<li>

<a href="javascript:;">222</a>

</li>

<li>

<a href="javascript:;">222</a>

</li>

<li>

<a href="javascript:;">222</a>

</li>

</ul>

</div>

<div class="title">

<ul>

<li>

<a href="javascript:;">333</a>

</li>

<li>

<a href="javascript:;">333</a>

</li>

<li>

<a href="javascript:;">333</a>

</li>

<li>

<a href="javascript:;">333</a>

</li>

</ul>

</div>

<div class="title">

<ul>

<li>

<a href="javascript:;">444</a>

</li>

<li>

<a href="javascript:;">444</a>

</li>

<li>

<a href="javascript:;">444</a>

</li>

<li>

<a href="javascript:;">444</a>

</li>

</ul>

</div>

</div>

 

</body>

 

</html>

附件下载:
 

本帖内容针对以下视频发布:

6-定时器应用-自动切换焦点图、QQ延时菜单实例
 
童童

同学你好,


你打开控制面板,


然后再移动,


你会发现,所有元素移入一次之后,


会把所有的div显示出来,


你说的从左往右移入正常是因为,后面显示的元素把前面的覆盖了


如果从右往左移动,后面的先出现,层级又比前面的高,所以看不到前面显示的元素.


解决:


移出元素的时候,把对应的div隐藏掉,确保只有一个div在下方显示


 


 

前天16:50  回复本帖
登录 后才可以发表回复