AngularJS ng-mouseover Directive
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 >w3wiki</ 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" > w3wiki is the computer science portal for Beginner. </ 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" >w3wiki</ 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 = 'w3wiki'; $scope.alert = function () { alert($scope.click); } }]); </ script > </ body > </ html > |
Output:
Contact Us