AngularJS | ng-mouseenter Directive
The ng-mouseenter directive in AngularJS is used to apply custom behaviour when a mouse-enter event occurs on a specific HTML element. It can be used to show popup alert when mouse enters a specific position in a HTML element. It is supported by all HTML elements.
Syntax:
<element ng-mouseenter="expression"> content ... </element>
Example 1:
<!DOCTYPE html><html> angular.min.js"></script> <head> <title>ng-mouseenter Directive</title> </head> <style type="text/css"> .outerDiv { width: 100px; height: 100px; background-color: green; margin-left:40px; } </style> <body ng-app style="padding:30px"> <h1 style="color:green">GeeksforGeeks</h1> <h2>ng-mouseenter Directive</h2> <div class="outerDiv" ng-mouseenter="oc=oc+1;outer=true" ng-mouseleave="outer=false"> <p style="text-align:center;color:white">Mouse {{outer==true?'Enter':'Out'}}</p> <br /> <p style="text-align:center;color:white"> {{oc}}<br /></p> </div> </body></html> |
Output:
Before Mouseenter:
After Mouseenter:
Example 2:
<!DOCTYPE html><html> angular.min.js"></script> <head> <title>ng-mouseenter Directive</title> </head> <body ng-app="app" style="text-align:center"> <h1 style="color:green">GeeksforGeeks</h1> <h2>ng-mouseenter Directive</h2> <div ng-controller="app"> Input: <input type="text" ng-mouseenter="alert()" ng-model="click" /> </div> <script> var app = angular.module("app", []); app.controller('app', ['$scope', function ($scope) { $scope.click = 'geeksforgeeks'; $scope.alert = function () { alert($scope.click); } }]); </script> </body></html> |
Output:
Before Mouseenter:
After Mouseenter:
