实现鼠标移入div悬浮
2019-10-31 本文已影响0人
帅帅哒主公
1.效果
鼠标移入div悬浮.gif
2.代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title></title>
<style>
.container {
width: 120px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
list-style: none;
}
.container li {
margin-left: 10px;
margin-top: 10px;
width: 50px;
height: 50px;
position: relative;
}
.container li div {
width: 50px;
height: 50px;
background-color: red
}
.container li:hover {
position: relative;
top: -2px;
left: -2px;
}
</style>
</head>
<body>
<ul class="container">
<li><div>hao1</div></li>
<li><div>hao2</div></li>
<li><div>hao3</div></li>
<li><div>hao4</div></li>
</ul>
</body>
</html>
