这个效果就是这个博客用到的那个小黑图标的效果

这个需要自己调整一些东西才能符合自己的需要。

<style type=”text/css”>
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, “新宋体”;}
/* next prev btn*/
.npbtn{padding:10px 30px 20px 0px;height:60px;width:300px;margin:20px auto;}
.disable{background:#EBEBEB;
border-radius:30px;
-moz-border-radius:30px;
-webkit-border-radius:30px;}
.prev{float:left;}
.next{float:right;}
.next,.prev{padding:0 20px 0 0;height:40px;background-position:right -348px;position:relative;text-shadow:0 1px transparent}
.next .title{padding:11px 38px 0 40px;right:0;}
.prev .title{padding:10px 26px 0 0;right:0;}
.cap{width:20px;height:40px;display:block;background-position:left -282px;}
.title{display:none;position:absolute;top:0;color:#fff;font-size:16px;}
.arrow{width:40px;height:40px;position:absolute;top:0;background:url(<?php bloginfo(“template_directory”);?>/static/images/ba.png) no-repeat;}
.prev .arrow{left:0;background-position:10px 10px;}
.next .arrow{right:0;background-position:0px -40px;}
.actives{
background-color:#000;
border-radius:30px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
}
.actives a{display:block;}
.actives a:hover{text-decoration:none;}
</style>

<div class=”prev actives”><a href=”http://www.followcat.cn/”><span class=”cap”></span><span class=”arrow”></span><span class=”title”>小黑最帅!</span></a></div>

<script type=”text/javascript”>
$(function(){
$(“.actives a”).each(function(){
$(this).hover(function(){
$(this).css(“cursor”,”pointer”);
$(this).stop();
$(this).animate({width:120},400,function(){
$(this).children(“.title”).css(“display”,”block”);
})
},function(){
$(this).stop();
$(this).children(“.title”).css(“display”,”none”);
$(this).animate({width:20},400);
})
})
});
</script>

就这么多!