作业代码
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>练习</title>
<link rel="stylesheet" href="css/1.css" />
</head>
<body>
<div id="container">
<span>手机</span>
<div class="child">
</div>
</div>
</body>
</html>
css:
#container{
width: 50px;
height: 50px;
background-color: orange;
position: relative;
float: left;
text-align: center;
padding-top: 5px;
margin-top: 30px;
}
.child{
opacity: 0;
}
#container:hover>.child{
width: 150px;
height: 150px;
opacity: 1;
border: 3px solid rebeccapurple;
margin-left: 50px;
margin-top: 5px;
background-image: url(../图片效果.png);
background-size: cover;
}
效果图
鼠标放上前：
鼠标放上后：
4714
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
