javascript - テキストにカーソルを合わせると画像が回転する

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;
}