Skip to content
Related Articles

Related Articles

Improve Article

AngularJS | ng-mouseover Directive

  • Last Updated : 26 Mar, 2019

The ng-mouseover Directive in AngularJS is used to apply custom behavior when an mouseover event occurs on a specific HTML element. It can be used to show popup alert when mouse moves over a specific element. It is supported by all HTML elements.

Syntax:

<element ng-mouseover="expression"> Contents... </element>

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




<!DOCTYPE html>
<html>
      
<head>
    <title>ng-mouseover Directive</title>
  
    <script src=
    </script>
  
    <style type="text/css">
        .geek {
            border: 1px solid black;
            width: 400px;
            background-color: green;
            border-radius: 4px;
            height: 20px;
            color: white;
        }
    </style>
</head>
  
<body ng-app="">
    <center>
        <h1 style="color:green">
            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>
    </center>
</body>
  
</html>

Output:
Before mouseover the element:
ngmousedown
After mouseover the element:
ngmousedown

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




<!DOCTYPE html>
<html>
      
<head>
    <title>ng-mouseover Directive</title>
  
    <script src=
    </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:
Before mouseover the element:
ngmousedown
After mouseover the element:
ngmousedown




My Personal Notes arrow_drop_up
Recommended Articles
Page :