AngularJS ng-mouseenter Directive

Last Updated : 01 Aug, 2024

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>