<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="shoushou.css">
</head>
<body>
<div id="box">
<a href="">傻狗</a>
<a href="">盖帽女</a>
<a href="">看小说</a>
<a href="">公主病</a>
<div id="box_1">
<img src="./OIP-A.jpg" alt="">
<img src="./OIP-B(1).jpg" alt="">
<img src="./OIP-C.jpg" alt="">
<img src="./OIP-D(1).jpg" alt="">
</div>
</div>
</body>
</html>
*{margin: 0;padding: 0;}
#box{
width: 800px;
height: 600px;
border: 1px solid black;
margin: 20px auto;
}
img{
width: 350px;
height: 350px;
}
a{
display: inline-block;
width: 190px;
height: 60px;
text-align: center;
line-height: 60px;
font-size: 24px;
color: #000;
text-decoration: none;
border: 1px solid gainsboro ;
}
#box_1{
width: 350px;
height: 350px;
border: 1px solid blanchedalmond;
margin: 95px auto;
position: relative;
}
#box_1 img{
position: absolute;
}
#box a:nth-child(1):hover~#box_1 img:nth-child(1),
#box a:nth-child(2):hover~#box_1 img:nth-child(2),
#box a:nth-child(3):hover~#box_1 img:nth-child(3),
#box a:nth-child(4):hover~#box_1 img:nth-child(4)
{
z-index: 1;
}
#box a:hover{
color: white;
background-color:#DCDCDC ;
}
2175
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
