AngularJS ng-mouseenter Directive Last Updated : 01 Aug, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report 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= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/ 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= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </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: Comment More infoAdvertise with us Next Article AngularJS ng-mouseenter Directive V Vishal Chaudhary 2 Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Directives Similar Reads AngularJS ng-mouseover Directive The ng-mouseover Directive in AngularJS is used to apply custom behavior when a mouseover event occurs on a specific HTML element. It can be used to show a popup alert when the mouse moves over a specific element. It is supported by all HTML elements. Syntax: <element ng-mouseover="expression" 2 min read AngularJS ng-mouseleave Directive The ng-mouseleave directive in AngularJS is used to apply custom behavior when a mouse-leave event occurs on a specific HTML element. It can be used to show a popup alert when the mouse leaves a specific position in an HTML element. It is supported by all HTML elements.Syntax:<element ng-mouselea 1 min read AngularJS ng-mousemove Directive The ng-mousemove Directive in AngularJS is used to apply custom behavior when mousemove event occurs on a specific HTML element. It can be used to display a popup alert when the mouse moves over a specific HTML element. It is supported by all HTML elements. Syntax:<element ng-mousemove="expressio 2 min read AngularJS ng-mousedown Directive The ng-mousedown Directive in AngularJS is used to apply custom behavior when mousedown event occurs on a specific HTML element. It can be used to show a popup alert when the mouse button is pressed down. It is supported by all HTML elements. Syntax: <element ng-mousedown="expression"> Content 1 min read AngularJS ng-mouseup Directive The ng-mouseup Directive in AngularJS is used to apply custom behavior when a mouseup event occurs on a specific HTML element. It can be used to show a popup alert when the mouse button is pressed. The order of a mouse click is Mousedown, Mouseup, Click. It is supported by all HTML elements. Syntax: 2 min read Like