鼠标划过时使得DIV整体移动效果的实现

CSS ----鼠标划过时使得DIV整体移动效果的实现 效果图如下： ``CSS代码：

.col-sm-3:visited { COLOR: #00007e; TEXT-DECORATION: none } .col-sm-3:hover { left: 5px; top: -20px; /*向上移动距离,向下的话该值设置为正数*/ position: relative; COLOR: #ff0000; TEXT-DECORATION: none } .col-sm-3:active { COLOR: #00007e; TEXT-DECORATION: none }

HTML代码

<div class="col-sm-3"> <div class="ibox"> <div class="ibox-content "> <h5 class="m-b-md">Q2 销量</h5> <h2 class="text-navy"> <i class="fa fa-play fa-rotate-270"></i> 上升 </h2> <small>更新时间：12天以前</small> </div> </div> </div> <div class="col-sm-3"> <div class="ibox"> <div class="ibox-content"> <h5 class="m-b-md">Q3 销量</h5> <h2 class="text-danger"> <i class="fa fa-play fa-rotate-90"></i> 下降 </h2> <small>更新时间：12天以前</small> </div> </div> </div>