AngularJS Mouse Hover and Leave Event

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>  
  6.     <style>  
  7.         .pinkDiv {  
  8.             width: 100px;  
  9.             height: 100px;  
  10.             background-color: Pink;  
  11.             padding: 2px 2px 2px 2px;  
  12.         }  
  13.           
  14.         .greenDiv {  
  15.             width: 100px;  
  16.             height: 100px;  
  17.             background-color: Green;  
  18.             padding: 2px 2px 2px 2px;  
  19.         }  
  20.     </style>  
  21. </head>  
  22.   
  23. <body ng-app>  
  24.     <h1>Angularjs mouse hover and leave event </h1>  
  25.     <div ng-class="{pinkDiv: enter, greenDiv: leave}" ng-mouseenter="enter=true;leave=false;" ng-mouseleave="leave=true;enter=false"> Mouse <span ng-show="enter">Enter</span> <span ng-show="leave">Leave</span> </div>  
  26. </body>  
  27.   
  28. </html>