Javascript angularjs中的嵌套ng鼠标盖不'；行不通

我对jquery使用了相同的方法，即嵌套的mouseover和mouseleave，它可以工作，但对angularjs不起作用

我想在鼠标进入

时显示按钮，但在鼠标触摸
时隐藏按钮。但问题是我的
在
中

<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>


隐藏

x


此处演示：
尝试从
p

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

隐藏

演示：


否则，请使用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>


隐藏
x


演示：
尝试使用
ng mouseenter
而不是
ng mouseover