AngularJS | ng-mouseover Directive
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:
After mouseover the element:
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:
After mouseover the element:
