Here we will learn what is ng-mouseover event directive in angularjs, use of ng-mouseover event in angularjs, call or raise custom functions whenever mouse pointer hover on an element in angularjs with example.
In angularjs ng-mouseover event directive is used to execute or raise custom events / functions whenever mouse cursor hover on html elements.
The ng-mouseover event in angularjs will fire an events whenever mouse cursor hover on element.
Suppose in angularjs application if you want to raise an event / function whenever mouse cursor hover an elements then it’s better to use ng-mouseover event.
Following is the syntax of using angularjs ng-mouseover event directive in applications.
<element ng-mouseover="expression">
--Your Code--
</element>
In angularjs whenever mouse pointer or cursor hover on html elements then ng-mouseover event will fire and execute expression and ng-mouseover event will support all html elements.
The ng-mouseover event in angularjs will not override onmouseover event of html elements both will execute separately.
Following is the example to raise custom function whenever mouse cursor hover on html element by using ng-mouseover event in angularjs application.
<!DOCTYPE html>
<html>
<head>
<title>
AngularJs ng-mouseover Event with Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('ngmouseoverApp', []);
app.controller('ngmouseoverCtrl', function ($scope) {
$scope.count = 0;
$scope.getdetails = function () {
$scope.count = $scope.count + 1;
}
});
</script>
</head>
<body>
<div ng-app="ngmouseoverApp" ng-controller="ngmouseoverCtrl">
<h2>AngularJS ng-mouseover Event Example</h2>
<div style="padding:10px; border:1px solid black; width:30%; cursor:pointer; font-weight:bold" ng-mouseover="getdetails()">Hover Mouse Cursor Here...</div><br /><br />
<span style="color:Red">No. of Times MouseOver Event Fired: {{count}}</span>
</div>
</body>
</html>
If you observe above angularjs ng-mouseover event example we are calling function getdetails() in ng-mouseover event and showing number of times mouseover event fired whenever mouse hover on html elements.
Following is the result of using ng-mouseover event in angularjs applications.
This is how we can use ng-mouseover event in angularjs applications to raise events whenever mouse pointer / cursor hover on html elements.