hover悬停放大的翻页效果
来源：52css 时间：2008-05-19 12:20:00
今天我们继续向大家介绍一款翻页效果的制作。当鼠标移动到链接上时，翻页的链接区除了有悬停效果，还会放大。这样的效果具有很强烈的效果。大家适当美化即可作为自己的CSS布局资料了。
首先看XHTML代码：
<ul id="nav">
<li><a href="#">«</a></li>
<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>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">»</a></li>
</ul>
用无序列表来实现内容，当然，您也可以用段落p以及结合a标签来定义，根据你的页面结构进行选择即可。
看下面的CSS代码：
#nav {
list-style: none;
display: inline;
}
#nav li {
display: inline;
margin-right: 5px;
float: left;
height: 20px;
width: 20px;
}
#nav a {
color: #03c;
text-decoration: none;
display: block;
font-size: 14px;
font-family: Geneva, Arial, Helvetica, sans-serif;
border: 1px solid #999;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
}
#nav li a:hover {
font-size: 24px;
line-height: 30px;
height: 30px;
width: 30px;
position: absolute;
z-index: 10;
margin: -5px 0 0 -5px;
font-weight: bold;
color: #c00;
border: 1px dotted #666666;
background: #EEE;
}
代码相对简单，不再一一详解。大家可以对照52CSS.com的相关教程进行学习。
看最终的运行效果：
标签：hover,放大,鼠标,效果
0
投稿猜你喜欢
sql存储过程获取汉字拼音头字母函数
2011-11-03 16:58:05
javascript 获取硬盘信息代码
2007-12-08 21:27:00
Christopher Schmitt 谈学习CSS的益处
2008-07-13 14:15:00
一个提高了近10％转化率的改进
2009-05-22 12:40:00
JavaScript十二月新标准ECMA262v5快速浏览
2009-12-27 12:56:00
试试把xml和javascript写到同一个文件里面
2009-10-02 16:53:00
asp 关键词高亮显示(不区分大小写)
2011-04-07 10:55:00
javascript修正12个浏览器兼容问题[译]
2009-04-23 12:19:00
WEB页面工具语言XML带来的好处
2008-05-29 11:01:00
SQL Server特殊磁带备份及恢复设计
2009-01-21 14:39:00
如何获取浏览器的更多信息？
2009-11-23 20:48:00
js实现(层,表格)元素圆角的函数
2008-01-01 16:40:00
转换字符串单词的第一个字母为大写
2007-10-18 10:50:00
MySQL转义字符的实际应用
2010-08-31 14:55:00
定义列表: DL DT DD
2009-05-06 13:08:00
谈谈XHTML中CDATA
2007-09-17 12:45:00
资料：MsSQL常用SQL语句
2009-02-23 12:54:00
SQL Server中两种修改对象所有者的方法
2009-01-15 13:10:00
有序列表 li ol
2008-07-30 12:31:00
用ASP判断客户端浏览器语言自动跳转
2010-07-09 13:34:00