The ng-mouseenter directive in AngularJS is used to apply custom behavior when a mouse-enter event occurs on a specific HTML element. It can be used to show a popup alert when the mouse enters a specific position in an HTML element. It is supported by all HTML elements.
Syntax:
<element ng-mouseenter="expression">
Content ...
</element>
Parameter value:
- expression: The expression will execute only when the mouse cursor enters the specific region of an element.
Example 1: This example describes the use of the ng-mouseenter Directive in AngularJS by counting the number of times the mouse enters the specific area of an element.
HTML
<!DOCTYPE html>
< html >
< head >
< script src=
angular.min.js"></ script >
< title >ng-mouseenter Directive</ title >
< style type = "text/css" >
.outerDiv {
width: 100px;
height: 100px;
background-color: green;
margin-left: 40px;
}
</ style >
</ head >
< 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:
Example 2: This example describes the use of the ng-mouseenter Directive in AngularJS by displaying the alert message by entering into the input element’s region.
HTML
<!DOCTYPE html>
< html >
< head >
< script src =
</ script >
< 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: