Open In App

AngularJS ng-mouseover Directive

Last Updated : 08 Sep, 2022
Comments
Improve
Suggest changes
Like Article
Like
Report

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">
    Content... 
</element>

Parameter value:

  • expression: This expression specifies that when the mouse cursor moves over the element then the associated expression will be executed.

Example 1: This example uses the ng-mouseover Directive to display content when the mouse moves over the element. 

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>ng-mouseover Directive</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>

    <style type="text/css">
        body {
            text-align: center;
        }
        .geek {
            border: 1px solid black;
            width: 400px;
            background-color: green;
            border-radius: 4px;
            height: 20px;
            color: white;
        }
        h1 {
            color: green;
        }
    </style>
</head>

<body ng-app="">
    <h1>GeeksforGeeks</h1>
    <h2>ng-mouseover Directive</h2>
    <div ng-init="geek=false">
        <button ng-mouseover="geek=true" 
                ng-mouseleave="geek=false">
            Mouse over me!
        </button><br><br>
        <div class="geek" ng-show="geek">
            GeeksforGeeks is the computer
            science portal for geeks.
        </div>
    </div>
</body>
</html>

Output:

 

Example 2: This example uses the ng-mouseover Directive to display an alert message when the mouse moves over an element. 

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>ng-mouseover Directive</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>

<body ng-app="app" 
      style="text-align:center">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h2>ng-mouseover Directive</h2>
    <div ng-controller="app">
        Input: 
        <input type="text" 
               ng-mouseover="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: 

 

V
Vishal Chaudhary 2
Improve
Article Tags :

Explore

Lightbox