Question

我在制作一个自定义组件，在您将鼠标悬停在用户名后显示一个小的下拉区域。我正在使用两种状态，向上并悬停以切换我的下拉框。

我的问题是，在我离开用户名后，它认为我将离开组件级别Group。然后第二级组（我的下拉组）消失。

我尝试在我的鼠标悬停功能Group上将事件处理程序重新附加到我的组件级callLater，但这不起作用。

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx"
         mouseOver="groupLogIn_mouseOverHandler(event)" 
         mouseOut="groupLogIn_mouseOutHandler(event)"
        >
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            import spark.skins.SparkSkin;
            protected function groupLogIn_mouseOverHandler(event:MouseEvent):void
            {

                this.currentState = "hover";
            }

            protected function groupLogIn_mouseOutHandler(event:MouseEvent):void
            {

                this.currentState = "up"
            }
        ]]>
    </fx:Script>

    <s:states>
        <s:State name="up"/>
        <s:State name="hover"/>
    </s:states>

    <s:Label id="lblUsername" color="0xffffff" fontSize="14" right="18" top="5"/>

    <s:Group  includeIn="hover" width="160" height="110" top="20" right="0" >
        <s:Rect top="0" right="0" bottom="0" left="0">
            <s:fill>
                <s:SolidColor color="0x1a1a1a"/>
            </s:fill>
        </s:Rect>
    </s:Group>
</s:Group>

Answer 1

您的鼠标事件需要“hitzone”。现在，组件的一部分是完全透明的。当鼠标移过透明区域时，将触发MOUSE_OUT事件。（当我说'透明'时，μi实际上意味着根本没有任何东西）。

幸运的是，这很容易解决：只需添加一个覆盖其他组件下方整个区域的Rect，并将其alpha设置为0。这使得Rect对用户不可见，但它仍然可以对鼠标事件做出反应。

<s:Rect id="hitzone" top="0" right="0" bottom="0" left="0">
   <s:fill>
       <s:SolidColor alpha="0" />
   </s:fill>
</s:Rect>

<s:Label id="lblUsername" />

...

鼠标悬停时自定义下拉菜单

1 个答案: