将鼠标悬停在文本上时图像旋转

Question

是的，我有一个带有文字的div，当我将鼠标悬停在文本上时，它会渐变为红色并且剩余边距为4px，它旁边还有一个星形图像，我想要实现的是当文字悬停在上面但是仍然让它变成红色并留下4px的余量时，任何想法都会使星星旋转？

Answer 1

小提琴：http://jsfiddle.net/vPAcF/

CSS：

span.red:hover {
    color:#C42626;
    -webkit-transition:color 0.5s ease-in;
    -moz-transition:color 0.5s ease-in;
    -o-transition:color 0.5s ease-in;
    transition:color 0.5s ease-in;
}
span.red:hover .star {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -0-transform: rotate(45deg);
    transform: rotate(45deg);
}
.star {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
    -webkit-transform: rotate(0deg);
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
}
.star:hover {
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}
span.red {
    color:#CCC;
    -webkit-transition:color 0.5s ease-in;
    -moz-transition:color 0.5s ease-in;
    -o-transition:color 0.5s ease-in;
    transition:color 0.5s ease-in;
}