Styling text to underline on hover in flex 4

Question

I'm sure there's an incredibly easy way to do this, but I've been searching for a while now and haven't turned it up.
What I want to to is have a bunch of label components throughout my application that will change their text style to underline on hover.
I sort of got it to work using a very clunky onMouseOver/onMouseOut implementation, but it tends to sometimes leave the text underlined after the mouse moves off the text.
Also, the event.target  that came back to the handler was unpredictable. Sometimes it was the label component, sometimes a textline object.
Ideally I'd prefer to do this via CSS. Any ideas welcome!

Answer 1

Got a similar problem in Flex SDK 3.5, didn't check in SDK 4 yet.
Changing underline via CSS is simple. In your CSS prepare something like
Label.clickable {
    textDecoration: underline;   
Label.nonclickable {
    textDecoration: none;
Label.clickableOver {
    textDecoration: underline;
    color: #333333;
and handle mouseOver and mouseOut events:
<mx:Label mouseOver="onMouseRoll(event)" mouseOut="onMouseRoll(event)" ... />
In a single method like below
            private function onMouseRoll(event:MouseEvent):void {
                if (event.type == MouseEvent.MOUSE_OVER) {
                    event.target.styleName = "clickableOver";
                } else {
                    event.target.styleName = "clickable";
or create 2 separate handlers for each event.
Whenever required set styleName to "nonclickable" to turn underline off. I do that when label should become inactive.
My problem is that underline sticks, even when styleName is forced on the label by all means.
Even FlexSpy shows underline="none" for the label, which is still underlined on the screen.
After couple hours of waisted time switched to direct control over textDecoration style for the label object, which works always.
If anyone has related experience or knows if that's a bug please share.
Thanks.