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
Share Improve this question edited Apr 28, 2014 at 3:55 Arun P Johny 388k68 gold badges531 silver badges532 bronze badges asked Apr 28, 2014 at 3:46 user3522457user3522457 2,9736 gold badges25 silver badges25 bronze badges2 Answers
Reset to default 3Try 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