用CSS可以轻松实现各种各样的链接和hover效果，实现方法也很简单，多为在a和a:hover属性中设置不同的背景属性（background-color 或者background-image），边框（border--left,bottom ...）以及根据背景配置的字体属性（font：bold size #color ）等，所谓设计效果的优劣，其实不外乎各种属性的搭配组合效果，只要够耐心，肯定能出彩，ul和li属性（list-style-image）类似，俺就不赘述了。下面几张是利用这些小技巧作出的效果：
<这里想介绍的方法也是通过更换背景图片实现链接效果的。通常在有链接情况下更换背景的做法很常见了，不赘述，我介绍的是一种新的方法，可以隐藏链接的文字，一次性载入背景图片。我做的是纵向的，效果如下：
则需要制作4张背景图片，每张图片则是一个背景图的两倍高（2h），显示区域设置为一个h，hover效果设置背景图align为bottom。
/* 1为正常显示效果，显示的是背景图片的上半部分；2为hover时显示效果，显示的是黄色区域。 */
具体CSS代码如下：
#thinkjamenu {
list-style: none;
padding: 0;
margin: 0;
width: 200px;
height: 200px;
position: relative;
}
#thinkjamenu span {
display: none;
position: absolute;
}
#thinkjamenug a {
display: block;
text-indent: -900%;/*为了让文字不可见，只表现图片背景的效果*/
position: absolute;
outline: none;
}
#thinkjamenu a:hover {
background-position: left bottom;
}
#thinkjamenu a:hover span {
display: block;
}
#thinkjamenu .home {
width: 200px;
height: 40px;
background: url( 1.jpg) no-repeat;
left: 0px;
top: 0px;
}
#thinkjamenu .home span {
width: 200px;
height: 40px;
background: url(1.jpg) no-repeat;
left: 0px;
top: -40px;
}
#thinkjamenu .blog {
width: 200px;
height: 40px;
background: url( 2.jpg) no-repeat;
left: 0px;
top: 40px;
}
#thinkjamenu .blog span {
width: 200px;
height: 40px;
background: url(2.jpg) no-repeat;
left: 0px;
top: 0px;
}
#thinkjamenu .bbs {
width: 200px;
height: 40px;
background: url( 3.jpg) no-repeat;
left: 0px;
top: 80px;
}
#thinkjamenu .bbs span {
width: 200px;
height: 40px;
background: url( 3.jpg) no-repeat;
left: 0px;
top: 40px;
}
#thinkjamenu .qq {
width: 200px;
height: 40px;
background: url(4.jpg) no-repeat;
left: 0px;
top: 120px;
}
#thinkjamenu .qq span {
width: 200px;
height: 40px;
background: url（4.jpg) no-repeat;
left: 0px;
top: 80px;
}
网页代码：
<ul id="thinkjamenu">
<li><a href="http://www.thinkjam.org" class="home"> 原生脑浆</a></li>
<li><a href="http://www.thinkjam.org/mercury" class="blog">墨神的凡龛</a></li>
<li><a href="http://www.thinkjam.org/bbs" class="bbs">原生脑浆BBS</a></li>
<li><a href="http://www.thinkjam.org/zoptuno" class="qq">just平生一笑</a></li>
</ul>
将网页代码插入需要的区域即可。（注：转载请注明出处）
Comments