Question

我在我的flex应用程序中有一个基本的鼠标悬停，它会更改onmouseover上的图像并使用代码mouseOver="functionToChangeImageSource()"将其更改为onmouseout而另一个更改为mouseout。

当你慢慢地鼠标移开时，它工作正常，但是如果我快速将鼠标移到它上面，它偶尔会停留在鼠标悬停图像上，鼠标输出功能似乎没有启动。有什么我可以做的来解决这个问题，或者有没有人知道为什么会发生这种情况？

另外，我尝试过rollOver和rollOut，但它有同样的问题。

代码如下（我将其切换为隐藏并在鼠标悬停/显示时显示两个图像以查看它是否解决了问题，但它没有）：

        <mx:Image source="images/logout.jpg"  
              left="0"
              top="350"
              top.dataViewState="470"
              id="logoutimg"
              includeIn="dataViewState, dataDayViewState" 
              rollOver="logoutimg_mouseOverHandler(event)"
              click="doLogout()"
               />

    <mx:Image source="images/logoutover.jpg"  
              left="0"
              top="350"
              top.dataViewState="470"
              id="logoutoverimg"
              includeIn="dataViewState, dataDayViewState" 
              rollOut="logoutoverimg_mouseOutHandler(event)"
              visible="false"
              click="doLogout()" />

功能如下：

protected function logoutimg_mouseOverHandler(event:MouseEvent):void
        {
            logoutimg.visible = false;
            logoutoverimg.visible = true;
        }


        protected function logoutoverimg_mouseOutHandler(event:MouseEvent):void
        {
            logoutoverimg.visible = false;
            logoutimg.visible = true;
        }

我想你在鼠标输出之前没有完成鼠标悬停事件是正确的但是如何解决这个问题？

Answer 1

你最好使用这一行代码

    <mx:Image source="images/logout.jpg"  
          left="0"
          top="350"
          top.dataViewState="470"
          id="logoutimg"
          includeIn="dataViewState, dataDayViewState" 
          rollOver="event.currentTarget.source = 'images/logoutover.jpg'" 
          rollOut="event.currentTarget.source = 'images/logout.jpg'"
          click="doLogout()"
           />

Answer 2

我猜这是一个问题，可以在过度/结束时使用处理程序取决于闪存切换可见性的速度。

但这里的主要问题是你做错了。

您不需要2张图片，只需拥有一张图片并更改源属性：

    <mx:Image source="images/logout.jpg"  
      left="0"
      top="350"
      top.dataViewState="470"
      id="logoutimg"
      includeIn="dataViewState, dataDayViewState" 
      rollOver="logoutimg_mouseOverHandler(event)"
      rollOut="logoutoverimg_mouseOutHandler(event)"
      click="doLogout()"
       />



    protected function logoutimg_mouseOverHandler(event:MouseEvent):void
{
    logoutimg.source="images/logoutover.jpg";
}


protected function logoutoverimg_mouseOutHandler(event:MouseEvent):void
{
    logoutimg.source="images/logout.jpg";
}

编辑：如果您看到闪烁，请尝试embed syntax。您也可以使用Flex Css和我想的悬停属性（无需代码）。

Answer 3

我们最近遇到了同样的问题，唯一真正的解决方案似乎是用Button替换图像并将其上，下，上和禁用的外观更改为嵌入版本的图像。

Answer 4

如果您只使用mouseUp和mouseDown，那么您唯一的问题就是当用户点击图片时，然后鼠标仍然朝下，将鼠标移动远离图片。在这种情况下，图像保留在mouseDown版本中。要解决此问题，您还需要包含一个恢复为mouseUp图像的rollOut条件。现在，所有基地都被覆盖。

Flex 4在鼠标悬停时更改图像 - 鼠标悬停功能在我快速鼠标悬停时失败？

4 个答案: