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: