AngularJS中的嵌套ng-mouseover不起作用

Question

我在jquery中使用了相同的方法，即嵌套的mouseover和mouseleave，它有效，但在angularjs中无效。

我想在鼠标进入<li>时显示按钮，但在鼠标触摸<p>时隐藏按钮。但问题是我的<p>在<li>内。

<li ng-mouseover="showXBtn=true" ng-mouseleave="showXBtn=false">
  <p ng-mouseover="showXBtn=false" ng-mouseleave="showXBtn=true">Hide</p>
  <button ng-show="showXBtn"><span>x</span></button>
</li>

此处演示：http://plnkr.co/edit/66fxwmAJ3EZgpZql1yLP?p=preview

Answer 1

尝试使用ng-mouseenter而不是ng-mouseover。更新的PLUNK

Answer 2

尝试停止p 的事件传播

<p ng-mouseover="showXBtn=false; $event.stopPropagation()" ng-mouseleave="showXBtn=true; test($event)">Hide</p>

演示：Fiddle

---

否则，使用mouseenter而不是mouseout

<li ng-mouseenter="showXBtn=true; test($event)" ng-mouseleave="showXBtn=false; test($event)">
    <p ng-mouseenter="showXBtn=false;" ng-mouseleave="showXBtn=true; test($event)">Hide</p>
    <button ng-show="showXBtn"><span>x</span></button>
</li>

演示：Fiddle