Flex show/hide on mouse over/out

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

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

Answer 2

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>