用CSS3玩一下链接信息介绍方式_点击链接后下面出现对应的介绍内容css-CSDN博客

很神奇啊，今天居然在公司里登录了google+，我是有多么久没上那玩意了。有点意外，于是啊到处点啊点的，结果看到一个列表信息模块上，当鼠标经过的时候，文字从这个模块的下面“爬”上来了。

google的东西似乎跟IE这样低端的浏览器有“过节”，好嘛，不看IE，估计有可能是CSS3来实现的，手痒一下，自己写一个玩玩。点击我看效果，在这个demo中可以看到当鼠标经过那几个链接上，文字是“爬”上来了，鼠标移开文字又“滚”下去了，哦，如果你是用IE看的话，那就不是这些什么“爬”啊“滚”的了。

其实这个实现的方式很简单，就是通过定位来改变某个标签的位置，然后结合CSS3做一些比较圆滑的动画就可以了。对于CSS3这玩意，我的想法是，如果能使用的好，想法比较好的话，绝对是一个页面的亮点。但国内的网站还是要考虑一下下IE浏览器，虽然是考虑IE，但不代表我们一定要完全所有浏览器效果一样嘛，基本的效果差不多，信息能展示，应该也OK，是吧。

XHTML结构简单，主要就是a标签的hover，其实如果不考虑是链接，或者不考虑IE6的话（因为需要用到:hover），那么结构完全可以改变成别的东西，兼顾IE6真的是好浪费代码哦。

^? View Code XML

<ul>
	<li><a href="http://blog.linxz.de/" title="林小志的个人博客"><img src="http://www.linxz.de/favicon.ico" alt="linxz's blog"/><span>linxz.de</span><strong>林小志的个人博客</strong></a></li>
	<li><a href="http://www.ctrip.com/" title="林小志所在的公司"><img src="http://www.ctrip.com/favicon.ico" alt="携程网"/><span>ctrip.com</span><strong>林小志所在的公司</strong></a></li>
	<li><a href="https://www.elinkhost.com/" title="林小志博客的空间支持商"><img src="https://www.elinkhost.com/favicon.ico" alt="易联主机"/><span>elinkhost.com</span><strong>林小志博客的空间支持商</strong></a></li>
</ul>

这个是CSS的代码，简单几个效果，如果喜欢那就改吧。

^? View Code CSS

* {margin:0;padding:0;}
ul,li {list-style:none;font-size:12px;font-family:"microsoft YaHei",verdana;line-height:1.5;}
ul {width:300px;margin:20px auto;zoom:1;}
ul:after {clear:both;display:block;content:".";height:0;visibility:hidden;font-size:0;line-height:0;}
li {float:left;width:300px;height:30px;margin-bottom:10px;border:1px solid #CBCBCB;background-color:#E5E5E5;border-radius:3px;box-shadow:1px 1px 0 #96969D;}
li a {position:relative;display:block;width:280px;height:30px;overflow:hidden;padding-left:26px;text-decoration:none;color:#000000;_background-color:transparent;}
li a:hover {color:#FF6500;_background-color:#E5E5E5;}
li a img {position:absolute;top:6px;left:5px;border:0 none;}
li a span,
li a strong {position:absolute;top:0;left:26px;width:270px;height:30px;overflow:hidden;line-height:30px;opacity:1;-webkit-transition:all 500ms linear;-moz-transition:all 500ms linear;
	/*给IE6和IE7这两个小混蛋看的东西*/
	*cursor:pointer;*display:block;
}
li a strong {top:30px;opacity:0;
	/*给IE6和IE7这两个小混蛋看的东西*/
	*display:none;
}
li a:hover span {top:-30px;opacity:0;
	/*给IE6和IE7这两个小混蛋看的东西*/
	*display:none;
}
li a:hover strong {top:0;opacity:1;
	/*给IE6和IE7这两个小混蛋看的东西*/
	*display:block;
}