Flex show/hide on mouse over/out - apache-flex

Question

i have 2 containers one above the other,
i need to show the second one when
there is a mouse over the first one
and
hide it when it goes out of the first one
also i want the second container content to be usable (mouse clicks/moves)
how can i do that?

Answer 1

Biroka has the right idea but there is another way. Put the containers in a viewstack and change the selectedChild on rollOver and rollOut. This should eliminate your flicker. Here's a fully functional sample
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
<![CDATA[
private function vsRollOver():void{
viewstack1.selectedChild = container2;
}
private function vsRollOut():void{
viewstack1.selectedChild = container1;
}
]]>
</mx:Script>
<mx:ViewStack x="10" y="10" id="viewstack1" width="200" height="200" rollOver="vsRollOver();" rollOut="vsRollOut();">
<mx:Canvas id="container1" label="View 1" width="100%" height="100%" backgroundColor="0x0000ff">
</mx:Canvas>
<mx:Canvas id="container2" label="View 2" width="100%" height="100%" backgroundColor="0xff0000">
</mx:Canvas>
</mx:ViewStack>
</mx:Application>

Answer 2

The second container has to be above the first one and:
private function init():void // call this on creationComplete event
{
container2.visible = false;
container1.addEventListener(MouseEvent.ROLL_OVER,overFunction);
container1.addEventListener(MouseEvent.ROLL_OUT,outFunction);
}
private function overFunction(e:MouseEvent):void
{
container2.visible = true;
}
private function outFunction(e:MouseEvent):void
{
container2.visible = false;
}
I would suggest that container1 should be 1-2 pixel larger than container2