ng-mouseover 和 ng-mouseleave 同时触发

Question

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

我尝试过：

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

问题：当鼠标悬停时，ng-mouseleave 会同时触发，使元素循环闪烁。

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

Answer 1

目前(根据您的条件，不完全按照显示相反情况的代码(，当您以这种方式实现它时，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">

Answer 2

我将元素<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>