通过CSS3的hover一个元素使其兄弟元素也相应改变某种属性

在最近的一个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应该更多的是实现业务逻辑，而不是拿来做动画。