Question

我使用了与jquery相同的方法，它是嵌套的鼠标悬停和鼠标离开，它起作用，但不适用于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。 Updated 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

在angularjs中嵌套的ng-mouseover不起作用

2 个答案: