html hover behavior in flex

I've some flex structure:

<s:BorderContainer id="addFunctionBarContainer" width="100%" height="50" 
       mouseOver="addFunctionBar_hover(event)">
   <s:Button id="addFunctionBarButton" width="20" height="20"
       click="addFunctionBar_clickHandler(event)" skinClass="skins.AddButtonSkin"/>
</s:BorderContainer>

How to write the function

addFunctionBar_hover

that the behavior will be similar to this html

div:HOVER a, div a:HOVER{/*some style*/}
<div><a></a></div>

Explain: when I hover addFunctionBarContainer开发者_如何转开发 the addFunctionBarButton state should be hovered.

public function addFunctionBar_hover(event):void{
    var skin:ButtonSkin = ButtonSkin(addFunctionBarButton.skin);
    skin.setCurrentState("over");
}

Do this for mouseOut:

public function addFunctionBar_hoverOut(event):void{
    var skin:ButtonSkin = ButtonSkin(addFunctionBarButton.skin);
    skin.setCurrentState("up");
}