2016-07-25 10:18:30 DIV CSS实现放大镜效果的分页样式 鼠标放上去宽度高度增加放大
DIV CSS实现放大镜效果的分页样式 鼠标放上去宽度和高度增加放大。
纯CSS实现简单分页布局之鼠标悬停在分页链接上时分页链接布局边大（宽度、高度增加）
CSS代码：
- <style type="text/css">
- a {
- float:left;
- margin:5px 1px 0 1px;
- width:20px;
- height:20px;
- color:#999;
- font:12px/20px 宋体;
- text-align:center;
- text-decoration:none;
- border:1px solid orange;
- }
- a:hover {
- position:relative;
- margin:0 -9px 0 -9px;
- padding:0 5px;
- width:30px;
- height:30px;
- font:bold 16px/30px 宋体;
- color:#000;
- border:1px solid black;
- background:#eee;
- }
- </style>
分页HTML代码：
- <div>
- <a href="#">1</a>
- <a href="#">2</a>
- <a href="#">3</a>
- <a href="#">4</a>
- <a href="#">5</a>
- <a href="#">6</a>
- <a href="#">7</a>
- <a href="#">8</a>
- <a href="#">9</a>
- <a href="#">10</a>
- </div>