先给出效果图，见下图。下图主要的完成当鼠标放到分页数字的上会呈现一个变大的效果
实现思路：
（1）. 使用浮动属性，以便让li元素水平排列。
（2）.将a元素设置为块级元素，然后设置它们的尺寸。
（3）.使用链接伪类控制当鼠标放在链接之上使a元素尺寸变大；使用绝对定位，使a元素能够覆盖周边的元素。 特别说明:a元素的背景色设置为白色，因为默认状态背景是透明的，否则将会看到两边被遮盖的边框。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul {
list-style: none;
}
ul li {
float: left;
width: 22px;
height: 22px;
margin-left: 5px;
}
a {
display: block;
width: 20px;
height: 20px;
text-align: center;
text-decoration: none;
background-color: white;
border: 1px solid #666;
}
a:hover {
width: 40px;
height: 30px;
border: 1px solid #666;
position: relative;
line-height: 30px;
margin: -5px 0 0 -10px;
}
</style>
</head>
<body>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</body>
</html>
原文地址：https://www.cnblogs.com/liuyangjava/p/8439328.html
时间： 2024-10-10 08:49:26