AngularJS ng-mouseover Directive
Last Updated :
08 Sep, 2022
Improve
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.
<!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.
<!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:
Article Tags :
