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>

ng-mouseover＆amp; ng-mouseleave同时开火

2 个答案: