DR_GIGGULS
New Member
I have text wrapped in SPANs that are generated by Javascript, and when generated it includes inline styling. So something like:\[code\]<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>\[/code\]However, normally I want all the text to be one color, and only on hover should the special coloring defined inline be visible. The problem of course is that in order to override the inline styling for the non-hover styling, I have to include the \[code\]!important\[/code\] declaration. Then when I define the \[code\]:hover\[/code\] styling, there's nothing I can do.\[code\]#test > span { color: black !important;}#test:hover > span { color: inline; // Does not exist!}\[/code\]Is there any option I'm unaware of? Or is there a better way to achieve this?I can't run the Javascript onmouseover to add the inline styling, then remove onmouseout. Just in case someone wanted to suggest it.EDIT:I did just think of a crazy solution: Embed all the text SPANs in parent SPANs, give the parents the inline styling, force the children to be a uniform color through the important flag, and then on hover force the children to \[code\]inherit\[/code\] from the parents....... That would work, right? Anything more elegant?