CSS: Revert to inline styling on hover -

i have text wrapped in spans generated javascript, , when generated includes inline styling. like:

<div id="test">     <span style="color: red">text 1</span>     <span style="color: blue">text 2</span>     <span style="color: green">text 3</span>     ... </div> 

however, want text 1 color, , on hover should special coloring defined inline visible. problem of course in order override inline styling non-hover styling, have include !important declaration. when define :hover styling, there's nothing can do.

#test > span {     color: black !important; } #test:hover > span {     color: inline; // not exist! } 

is there option i'm unaware of? or there better way achieve this?

i can't run javascript onmouseover add inline styling, remove onmouseout. in case wanted suggest it.

edit:

i did think of crazy solution: embed text spans in parent spans, give parents inline styling, force children uniform color through important flag, , on hover force children inherit parents....... work, right? more elegant?

nesting text in span should work , can inherit color parent.

personally think should give them each class , change color on hover.

like this: http://jsfiddle.net/576ez/

html

<div id="test">     <span class="red hover">text 1</span>     <span class="blue hover">text 2</span>     <span class="green hover">text 3</span>     ... </div> 

css

#test .red.hover:hover {     color: red; } #test .blue.hover:hover {     color: blue; } #test .green.hover:hover {     color: green; }