Ng-Mouseleave-8

 

Ng-Mouseleave-8

 
 
 
<!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> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <style type="text/css"> .control-label { text-align: left !important; } </style> </head> <body ng-app=""> <div class="container"> <div class="row"> <div class="col-md-offset-3 well col-md-6 form-horizontal"> <h3>Comment Section</h3> <div class="row form-group"> <div class="col-md-4 control-label">Name :</div> <div class="col-md-8"> <input type="text" ng-style="style1" class="form-control" ng-mouseleave="style1={}" ng-mouseenter="style1={'background-color':'lightblue'}" /> </div> </div> <div class="row form-group"> <div class="col-md-4 control-label">Mobile Number :</div> <div class="col-md-8"> <input type="text" ng-style="style2" class="form-control" ng-mouseleave="style2={}" ng-mouseenter="style2={'background-color':'lightblue'}" /> </div> </div> <div class="row form-group"> <div class="col-md-4 control-label">Email Id :</div> <div class="col-md-8"> <input type="text" ng-style="style3" class="form-control" ng-mouseleave="style3={}" ng-mouseenter="style3={'background-color':'lightblue'}" /> </div> </div> <div class="row form-group"> <div class="col-md-4 control-label">Comment :</div> <div class="col-md-8"> <textarea rows="8" ng-style="style4" class="form-control" ng-mouseleave="style4={}" ng-mouseenter="style4={'background-color':'lightblue'}"></textarea> </div> </div> </div> </div> </div> </body> </html>
Output