AngularJS ng-mouseover Event with Example

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.

AngularJS ng-mouseover Event Directive

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.

Syntax of AngularJS 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.

Example of AngularJS ng-mouseover Event

Following is the example to raise custom function whenever mouse cursor hover on html element by using ng-mouseover event in angularjs application.

 

Live Preview

<!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.

Output of AngularJS ng-mouseover Event Example

Following is the result of using ng-mouseover event in angularjs applications.

 

Angularjs ng-mouseover event directive example result or output

 

This is how we can use ng-mouseover event in angularjs applications to raise events whenever mouse pointer / cursor hover on html elements.