一个比较常见的鼠标经过显示的交互动画，鼠标移动到指定位置，显示对应的内容。此案例为上方显示图片，也可以考虑放置二维码等，更多的内容可以自己去定义。

实现代码：

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的动画过渡会更好，一起来尝试下吧~