在最近的一个Bootstrap项目中用到了CSS3里面的hover,实现鼠标进入一个字体图标时,该字体图标向上移动一定距离,颜色也变为红色,同时其兄弟元素只改变颜色而不与其上移。
过程如下图
鼠标未进入之前
鼠标进入之后
<div class="trred">
<span class="simg glyphicon glyphicon-cog"></span>//字体图标
<h5>Full time Support</h5>//文字
</div>
用一个盒子trred将两者包住
#server .listcontent .trred:hover .glyphicon{
transition-property: transform,color;
transition-duration: 0.1s , 1s;
transition-timing-function: ease;
color:red;
transform: translateY(-10px);
}
#server .listcontent .trred:hover h5{
transition-property:color;
transition-duration: 1s;
transition-timing-function: ease;
color:red;
}
当鼠标移入trred盒子时 两者分别做出不同的过渡变化,从而实现想要的功能。
这样做减少了js代码的编写,如果用js实现就相对复杂得多,并且js应该更多的是实现业务逻辑,而不是拿来做动画。