<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
ul{width:604px;list-style-type: none;margin-top:100px;margin-left:200px;}
li{width:121px;height:121px;position: relative;z-index:1;float:left;margin-right: 30px;background:red;margin-bottom:20px;}
div{width:120px;height:600px;background:green;position:absolute;top:-200px;left:0;display: none;z-index:9999;}
</style>
<title>插入新闻</title>
<script>
window.onload=function(){
var oLi=document.getElementsByTagName('li');
for(var i=0;i<oLi.length;i++){
oLi[i].onmouseover=function(){
this.getElementsByTagName('div')[0].style.display='block';
}
oLi[i].onmouseout=function(){
this.getElementsByTagName('div')[0].style.display='none';
}
}
}
</script>
</head>
<body>
<ul>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
</ul>
</body>
</html>
为什么上面一排鼠标放在li上面绿块被下面红块盖住了,而下面一排却又是正常的没有被上面一排盖住,设置了定位,以及z-index。。。。
怎么能让绿块都是覆盖在红块上面??
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。