Flex顯示/隱藏鼠標懸停

Question

我有兩個以上的容器，

我需要顯示第二個

在第一個鼠標上放一個鼠標，當它離開第一個鼠標時將其隱藏

我也希望第二個容器內容可用（鼠標單擊/移動）

我怎樣才能做到這一點？

Answer 1

比羅卡（Biroka）有一個正確的想法，但是還有另一種方法。 將容器放入視圖堆棧，並在rollOver和rollOut上更改selectedChild。 這樣可以消除閃爍。 這是功能齊全的示例

<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

第二個容器必須位於第一個容器之上，並且：

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;
}

我建議container1應該比container2大1-2像素