网络编程
位置：首页>> 网络编程>> 网页设计>> hover悬停放大的翻页效果

hover悬停放大的翻页效果

　来源：52css　发布时间：2008-05-19 12:20:00　

标签：hover,放大,鼠标,效果

今天我们继续向大家介绍一款翻页效果的制作。当鼠标移动到链接上时，翻页的链接区除了有悬停效果，还会放大。这样的效果具有很强烈的效果。大家适当美化即可作为自己的CSS布局资料了。

　　首先看XHTML代码：


<ul id="nav">
    <li><a href="#">&laquo;</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="#">&raquo;</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的相关教程进行学习。

　　看最终的运行效果：




 

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com