AngularJS Built-in directives ngMouseenter and ngMouseleave
Example
The ng-mouseenter and ng-mouseleave directives are useful to run events and apply CSS styling when you hover into or out of your DOM elements.
The ng-mouseenter directive runs an expression one a mouse enter event (when the user enters his mouse pointer over the DOM element this directive resides in)
HTML
<div ng-mouseenter="applyStyle = true" ng-class="{'active': applyStyle}">
At the above example, when the user points his mouse over the div, applyStyle turns to true, which in turn applies the .active CSS class at the ng-class.
The ng-mouseleave directive runs an expression one a mouse exit event (when the user takes his mouse cursor away from the DOM element this directive resides in)
HTML
<div ng-mouseenter="applyStyle = true" ng-mouseleaver="applyStyle = false" ng-class="{'active': applyStyle}">
Reusing the first example, now when the user takes him mouse pointer away from the div, the .active class is removed.
