It is used to define an expression that execute when a mouse cursor moves over an element.
Sample coding for ng-mouseover directive in AngularJS:
Tryit<!DOCTYPE html><html><head><title>Wikitechy AngularJS Tutorials</title><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/
angular.min.js"></script></head><body ng-app=""><h2>ng-mouseover directive in AngularJs</h2><button ng-mouseover="count = count + 1" ng-init="count=0">
Mouse over here!
</button><h3> The mouseover count: {{ count }} </h3></body></html>
Code Explanation for ng-mouseover directive in AngularJS:
AngularJS is distributed as a JavaScript file, and can be added to a HTML page with a <script> tag.
The AngularJS application is defined by ng-app="". The application runs inside the <body> tag.It’s also used to define a <body> tag as a root element.
The ng-mouseover= “count=count+1” is used to increase the count variable by one, every time the mouse cursor moves over the button element.
The ng-init="count = 0" is used to define the initial value of the count variable is 0.
The {{ count }} is used to dynamically bind the count variable value when the mouse cursor moves over the button element.
Sample Output for ng-mouseover directive in AngularJS:
The output displays that a mouse cursor moves over the “Mouse over here!”button and the content “The mouseover count:1”. Here the variable “count” will increased a value by 1, every time a mouse cursor moves over the “Mouse moves here!” button.
