<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
height:700px;
width: 1480px;
margin:0 auto;
padding: 10px;
border: 4px solid gray;
/* z-index:-1;*/
position: relative;
/*background-image: url("picture/bg.jpg")*/
}
h1{
text-align: center;
color:rgb(56, 53, 53);
}
li{
list-style: none;
}
img{
width: 300px;
height:300px;
margin-top: 10px;
margin-left:50px;
border:5px solid grey
}
.img2{
display: none;
}
li{
list-style-type: none;
float: left;
a:hover .img2{
display: block;
width: 340px;
height:340px;
position: relative;
z-index: 2;
top:-10px;
left:-10px;
}
</style>
</head>
<body><h1>太阳系各个星球</h1>
<div>
<ul>
<li><a><img src="picture/地球.jpg.jpg"><img src="picture/地球.jpg.jpg" class="img2"></a></li>
<li><a><img src="picture/土星.jpg.jpg"><img src="picture/土星.jpg.jpg" class="img2"></a></li>
<li><a><img src="picture/天王星.jpg.jpg"><img src="picture/天王星.jpg.jpg" class="img2"></a></li>
<li><a><img src="picture/木星.jpg.jpg"><img src="picture/木星.jpg.jpg" class="img2"></a></li>
<li><a><img src="picture/海王星.jpg.jpg"><img src="picture/海王星.jpg.jpg" class="img2"></a></li>
<li><a><img src="picture/火星.jpg.jpg"><img src="picture/火星.jpg.jpg" class="img2"></a></li>
<li><a><img src="picture/金星.jpg.jpg"><img src="picture/金星.jpg.jpg" class="img2"></a></li>
<li><a><img src="picture/水星.jpg"><img src="picture/水星.jpg" class="img2"></a></li>
</ul>
悬浮上一行的下一行的往下挤,但是第2行却正确将图片悬浮出来,所以为什呢?怎样改动?就把悬浮的图片设置成相对定位图片你们自己随便找一个吧,解决立即采纳
