Ng-Mouseleave-2

 

when we over the mouse on text,the color of text changes to red because isShow variable is true.When we leave mouse then text become in original color because value of isShow variable is false.

 
 
 
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style> .red { color: red; } </style> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> </head> <body ng-app> <div> <p> Mouse Leave on the text</p> <div ng-mouseleave="isShow=false" ng-class="{'red':isShow}" ng-mouseover="isShow=true"> Name:John <span ng-show="isShow">Age:29</span></div> <div ng-mouseleave="Show=false" ng-class="{'red':Show}" ng-mouseover="Show=true"> Name:Clark <span ng-show="Show">Age:26</span></div> </div> </body> </html>
Output