ng-mouseover＆ng-mouseleave同时开火

Posted 2021-05-04

我正在尝试：显示/隐藏<img>标签。当鼠标结束时，它应该隐藏元素，当鼠标离开时，它应该显示标签。

我尝试过的：

<img ng-mouseover="active = true" ng-mouseleave="active = false"
     ng-init="active = true" ng-show="active">`

问题：当鼠标结束时，同时触发了ng-mouseleave，使元素在循环中闪烁。

我试图通过指令修复它，但我得到了相同的结果。

答案

目前（根据​​您的情况，不完全按照您的代码显示相反的情况），当您以这种方式实现时，mouseleave会在隐藏mouseover上的元素后自动触发。这是因为当基于ng-show表达式隐藏元素时，它还以某种方式模拟离开元素的鼠标。由于这个原因，它切换ng-show条件并使其再次可见，然后随后的鼠标事件使其无限循环。

您应该尝试使用opacity css属性而不是使用ng-show来实现此目的。此外，您的代码似乎与您打算实现的目标相反。

试过这个，它似乎按照你的意图工作。

<img ng-style="{'opacity': active ? 1 : 0}"  ng-mouseover="active = false" ng-mouseleave="active = true" ng-init="active=true">

另一答案

我将元素<img>元素放在<a>标记内，以便<a>捕获鼠标事件并操纵活动变量，如下所示：

<a ng-mouseenter="active = false" ng-mouseleave="active = true"  href="#" >
    <img  ng-init="active = true" ng-show="active" src="/path.jpg" alt=""> 
</a>