I used the same approach with jquery which is the nested mouseover and mouseleave and it worked, but not with angularjs.

I want to show the button when mouseenter into the <li>, but hide the button when the mouse touched the <p>. But the problem is my <p> is within the <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>

demo here :

I used the same approach with jquery which is the nested mouseover and mouseleave and it worked, but not with angularjs.

I want to show the button when mouseenter into the <li>, but hide the button when the mouse touched the <p>. But the problem is my <p> is within the <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>

demo here : http://plnkr.co/edit/66fxwmAJ3EZgpZql1yLP?p=preview

• javascript
• jquery
• angularjs

Share Improve this question Follow edited Apr 28, 2014 at 3:55 Arun P Johny 388k6868 gold badges531531 silver badges532532 bronze badges asked Apr 28, 2014 at 3:46 user3522457user3522457 2,97366 gold badges2525 silver badges2525 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Try using ng-mouseenter instead of ng-mouseover. Updated PLUNK

Try to stop the propagation of the event from p

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

Demo: Fiddle

---

Otherwise use mouseenter instead of 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>

Demo: Fiddle