不知道有没有人发现我换掉了 Feed 的统计图标，而使用了一个 RSS 的图片来链接到 本站 Feed 地址，然后我给这个图片做了一个 CSS 特效，你可以试着把鼠标移上去（位于“协议&订阅”模块的下方）… 是不是很棒？！
这个特效具体被称作什么，我也不太清楚，用我自己的描述就是：一个链接图案，鼠标滑上去后它就会切换成另一个图案。
之前我一直以为 CSS 通过 hover 这个动作来切换2张不同的图片，可试了半天没成功，最后 Jason 告诉我这并不是切换2张图片，而是给一张具有2种不图案的图片进行不同定位以取得不同的效果。怎么这句话这么难让人理解… 还是我表达有问题？
接下来简单介绍这个特效的实现方法：
首先准备一张具有两种大小一致图案的图片：
这个图片长118px，高59px，原理就是，我先让它显示下半部分的图案，当鼠标移动上去后，它就会显示上半部分的图案。下面给出实现特效的 CSS 代码：
/* RSS 图片效果 */
#rsslink a {
background: url(images/rss.png) no-repeat bottom left;
border: none;
width: 118px;
height: 30px;
display: block;
}
#rsslink a:hover {
background: url(images/rss.png) no-repeat top left;
height: 30px;
display: block;
}
#rsslink a {
background: url(images/rss.png) no-repeat bottom left;
border: none;
width: 118px;
height: 30px;
display: block;
}
#rsslink a:hover {
background: url(images/rss.png) no-repeat top left;
height: 30px;
display: block;
}
代码中 rsslink 是这个特效的名称；a:hover 是鼠标移动的动作；background: url(images/rss.png) 是背景图片；display: block; 是显示背景图案；代码第一部分我通过 bottom left 的定位先显示背景图片的下半部分的图案，第二部分再通过 top left 的定位来显示背景图片上半部分图案。最后将这个 CSS 效果通过 span id 赋给 feed.zeuscn.net 这个链接：
<span id="rsslink"><a href="http://feed.zeuscn.net" title="订阅我吧 :-)"></a></span>
嘿嘿，是不是很简单，你学会了没呢？ 
今后凡是学会了新的 CSS 特效我都会在这里“现学现卖”一番，来跟大家一起分享这些美化网页的方法！
zEUS.
相关日志
轻松发布您的评论，免费获取下周阿里妈妈广告位！
本周灌水排行：dreamer (5) , Yacca (4) , loke (3) , 酋长 (3) , liby (3) ,
年度沙发党：状元：fiorano(31) | 榜眼：摩摩诘(30) | 探花：hvl(22) |
本周灌水排行：dreamer (5) , Yacca (4) , loke (3) , 酋长 (3) , liby (3) ,
年度沙发党：状元：fiorano(31) | 榜眼：摩摩诘(30) | 探花：hvl(22) |
Name : zEUS.
不错，现在这种详细的教程是最吸引眼球de~
你学的也很快 昨天我就看了你的代码发现做的很好
多谢夸奖
图片层叠悬浮效果。可以这么称呼它吗？呵呵。
另外，两张图片的名称都是rss.png?且在同一个文件夹下面？这有点悬吧？
@老帕：这是一张图片… 然后上面有2个图案，我用的移位，并不是替换。
这个好玩！我以后也添加一个这样的特效！
good