Ng-Mouseenter-4

 
Count of innerDiv or outerDiv increase by 1 each time in which mouse is enter.
 
 
 
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> <style type="text/css"> .outerDiv { width: 200px; height: 200px; background-color: maroon; border-radius: 100px; } .innerDiv { width: 100px; height: 100px; background-color: tomato; margin: -20px 0px 0px 50px; border-radius: 100px; } </style> </head> <body ng-app> <div> <p>Mouse Enter on the square</p> <div class="outerDiv" ng-mouseenter="outerCount=outerCount+1;outer=true" ng-mouseleave="outer=false"> <p style="text-align:center;color:white">Mouse {{outer==true?'Enter':'Out'}}</p> <br /> <div class="innerDiv" ng-mouseenter="innerCount=innerCount+1;inner=true" ng-mouseleave="inner=false"> <p style="text-align:center;color:white">Mouse {{inner==true?'Enter':'Out'}}</p> <p style="text-align:center;color:white">{{innerCount}}</p> </div> <p style="text-align:center;color:white">{{outerCount}}<br /></p> </div> </div> </body> </html>
Output