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: