Image spin when hover over text

Question

Right, I have a div with text in it, When I hover over the text it fades to red and has a margin left of 4px, It also has a image of a star next to it, what I want to achieve is to make the star spin when the text is hovered over but still have it turn red and have a margin left of 4px, any ideas?

Answer 1

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