-1

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?

GoZoner
  • 67,920
  • 20
  • 95
  • 145
Ed Leeman
  • 11
  • 4
  • 1
    Hard, without existing code... :) – sinisake Jul 07 '13 at 19:20
  • Is the `` a child or a sibling? If yes, should be easy once you post your code. – Mooseman Jul 07 '13 at 19:22
  • Okay, give me a second – Ed Leeman Jul 07 '13 at 19:22
  • starStrength and conditioning training – Ed Leeman Jul 07 '13 at 19:24
  • Can you include your CSS? – Mooseman Jul 07 '13 at 19:24
  • 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 { 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;} – Ed Leeman Jul 07 '13 at 19:26
  • .star { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; -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); } – Ed Leeman Jul 07 '13 at 19:26
  • 1
    @Ed, please post that code in your question instead of a comment. Please also consider creating a [fiddle](http://jsfiddle.net/) so we can experiment with that code and get a better idea of the effect you want to achieve. – Frédéric Hamidi Jul 07 '13 at 19:26
  • I'm new, When I posted it, it got rid of all the tags and only left the text – Ed Leeman Jul 07 '13 at 19:27
  • Then I should direct you to our [markdown editing help page](http://stackoverflow.com/editing-help). – Frédéric Hamidi Jul 07 '13 at 19:30
  • Thank you, It's all sorted now, thanks to Mooseman :) – Ed Leeman Jul 07 '13 at 19:33

1 Answers1

0

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;
}
Mooseman
  • 18,763
  • 14
  • 70
  • 93