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