鲁达 一个比较常见的鼠标经过显示的交互动画，鼠标移动到指定位置，显示对应的内容。此案例为上方显示图片，也可以考虑放置二维码等，更多的内容可以自己去定义。
实现代码：
html代码如下：
<a class="code-float-display">鼠标移上显示图片 <span></span> </a>css代码如下：
.code-float-display{ display:inline-block; margin:150px auto 0; padding: 2px 6px; height:30px; line-height:30px; border:1px solid #ddd; text-align:center; position:relative; cursor:pointer; } .code-float-display span{ height:124px; width:124px; border:1px solid #ddd; padding:2px; background:url("qrcode.jpg") no-repeat center; position:absolute; top:-135px; left:50%; margin-left: -66px; display:none; } .code-float-display:hover span{ display:block; }基本原理：
用的a标签的伪类hover实现的，当鼠标没有移动到a标签区块中时，span标签是隐藏的。当鼠标移动到了a标签区块中时，span标签将会以块状元素展示，这个时候，由于span标签是包含在a标签里面的，所以，必须通过position定位来控制调整span的位置。两者要居中对齐，可以根据一个作为参考，按left:50%调整到中间线，然后再根据容器宽度的一半调整负值，那么就对齐了。
这个效果主要考察了三方面的知识，一个是内联元素、块状元素，一个是绝对定位、相对定位，一个是伪类的使用。
另外再自己加上一些CSS3的动画过渡会更好，一起来尝试下吧~