三月
18
最近忙着复习公务员考试,白天去图书馆,晚上才上网。所以博客都少写了。刚刚发现一个有点意思的链接鼠标悬停效果,可以实现鼠标放在上面的时候将中文链接文字切换成英文,发出来大家学习一下。
我第一眼看下去的时候以为是用 js 或者 flash 实现的,仔细看了代码才发现是纯 css 实现的。
具体网址不记得了,HTML 代码大概是这样的:
<a class="tran" href="/"><span class="en">Zao's Blog</span><span class="cn">智者的博客</span></a>
CSS代码:
.tran .cn {display: inline;}
.tran:hover .cn {display: none;}
.tran .en {display: none;}
.tran:hover .en {display: inline;}
.tran:hover .cn {display: none;}
.tran .en {display: none;}
.tran:hover .en {display: inline;}
大家不妨试试啊!这种效果比较适合在导航菜单中使用,显示出一种另类的美感。 ![]()
订阅评论
听景博个: http://www.boynan.com