携程UED（关于我们）页面
?
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>携程UED鼠标悬浮设置</title> <style> .entry ul.team-photo { overflow:hidden; zoom:1; margin:0 0 10px; font-size:12px; } .team-photo li { width:120px; height:120px; float:left; margin:0 12px 12px 0; line-height:16px; overflow:hidden; position:relative; /*将li的位置设置为relative*/ } .photo-pic img { width:120px; height:120px; display:block; border-radius:3px; /*圆角属性*/ } .photo-pic span { position:absolute; /*绝对定位*/ top:-120px; /*现将这个span设置到div的上面*/ right:0; z-index:2; /*设置z-index*/ display:block; border:1px solid #fff; /*添加边框*/ height:106px; width:98px; background:rgba(255,255,255,0.8); /*银色背景*/ color:#333; border-radius:3px; padding:6px 10px; font-weight:100; -webkit-transition:all .4s ease-in-out; /*添加一些css3效果*/ -moz-transition:all .4s ease-in-out; font-weight:bold; } /*当鼠标悬浮的时候，将top设置为0，就会滑动上去*/ /*这里的css选择器使用的非常绝*/ /*应该是li悬浮的时候，将span的top位置设置为0*/ .team-photo li:hover .photo-pic span { /*这里是关键*/ top:0; border-color:#bbb; } </style> </head> <body> <div href="javascript:;"> <img src="http://testing.uplook.cn/data/uploads/day_120518/201205180212125833.jpg" alt="携程UED（关于小弟我们）页面" pagespeed_url_hash="1846715410"> <span>Hi，这里是携程页面的demo哟！</span> </a> </li> </ul> </div> </div> <!-- #postcomments --> </div> </div> </body></html>?
?
携程UED：http://ued.ctrip.com/blog/?page_id=2288的关于我们。鼠标悬浮到一个介绍上面，就会滑动出现一个层，效果挺好的。将这个页面中的代码拷贝下来，进行学习。