Question

我有一个嵌套的ul-li结构。我有鼠标悬停＆amp;离开每个李。＆＃39;鼠标离开＆＃39;我离开李时会被触发但是如果我移动到里面的内部ul则不会被触发。这是我的傻瓜。例如在下面，如果我从parentli移动到childul，它不会触发mouseleave。但如果我完全离开parentli，它会触发mouseleave。任何帮助表示赞赏。

http://plnkr.co/edit/xPXC78xJ9EqXGEOmOI3G?p=preview

<ul>
    <li id="parentli" ng-mouseenter="showXBtn=true" ng-mouseleave="showXBtn=false">
      <p >Hide</p>

      <button ng-show="showXBtn"><span>x</span></button>
      <ul id="childul">
        <li ng-mouseenter="inner=true" ng-mouseleave="inner=false"> <p>Inner li</p><button ng-show="inner"><span>x</span></button></li>
      </ul>
    </li>
    </ul>

Answer 1

它不应该触发，因为<li id="parentli" ..是父级，所以ng-mouseleave将在鼠标离开元素时调用，但是如果你将子项仍然悬停在父元素上，那么为什么它不会触发

所以

<ul>
    <li ng-mouseenter="showXBtn=true" ng-mouseleave="showXBtn=false">
      <p >Hide</p>

      <button ng-show="showXBtn"><span>x</span></button>
      <ul>
        <li ng-mouseenter="inner=true; showXBtn=false" ng-mouseleave="inner=false; showXBtn=true"> <p>Inner li</p>
        <button ng-show="inner"><span>x</span></button></li>
      </ul>
    </li>
</ul>

当子元素的悬停将解决问题时，切换showXBtn的值。

<li ng-mouseenter="inner=true; showXBtn=false" ng-mouseleave="inner=false; showXBtn=true">

当子元素上的ng-mouseenter时，我们将设置inner=true，它将在子元素中按下按钮，然后设置showXBtn=false，它将隐藏父元素内的按钮

这是DEMO

嵌套的li-ul不会触发Ng鼠标离开

1 个答案: