您当前的位置:
求救。显示出来的div被挡住。
为什么旁边的li 会挡住显示出来的div？设置了z-index都不行。。。。求大神。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
ul{
list-style:none;
}
li{
width:50px; height:50px; position:relative;
float:left; margin-right:20px; margin-top:20px;
background:red; top:10px; z-index:1;
}
#box div{
width:100px;height:100px;position:absolute;
bottom:10px;left:30px;background:yellow;
border:solid 1px;display:none;z-index:9999;
}
#box{
width:660px;
height:250px;
border:solid 1px;
}
</style>
<script>
window.onload =function (){
var ali = document.getElementsByTagName("li");
function adiv(){
for(var i =0;i<ali.length;i++){
ali[i].style.zIndex=0;
ali[i].onmouseover =function (){
this.getElementsByTagName('div')[0].style.display="block";
}
ali[i].onmouseout =function(){
this.getElementsByTagName('div')[0].style.display="none";
}
}
}
adiv();
}
</script>
</head>
<body>
<div id="box">
<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>
<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>
</div>
</body>
</html>
------解决思路----------------------
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
ul{
list-style:none;
}
li{
width:50px; height:50px;
float:left; margin-right:20px; margin-top:20px;
background:red; top:10px; z-index:1;
}
li>div{
width:100%; height:100%; position:relative;
}
#box li>div>div{
width:100px;height:100px;position:absolute;
bottom:10px;left:30px;background:yellow;
border:solid 1px;display:none;z-index:9999;
}
#box{
width:660px;
height:250px;
border:solid 1px;
}
</style>
<script>
window.onload =function (){
var ali = document.getElementsByTagName("li");
function adiv(){
for(var i =0;i<ali.length;i++){
ali[i].style.zIndex=0;
ali[i].onmouseover =function (){
this.getElementsByTagName('div')[1].style.display="block";
}
ali[i].onmouseout =function(){
this.getElementsByTagName('div')[1].style.display="none";
}
}
}
adiv();
}
</script>
</head>
<body>
<div id="box">
<ul>
<li><div><div></div></div></li>
<li><div><div></div></div></li>
<li><div><div></div></div></li>
<li><div><div></div></div></li>
<li><div><div></div></div></li>
<li><div><div></div></div></li>
<li><div><div></div></div></li>
<li><div><div></div></div></li>
<li><div><div></div></div></li>
</ul>
</div>
</body>
</html>