La directiva ng-mouseenter en AngularJS se usa para aplicar un comportamiento personalizado cuando ocurre un evento de entrada de mouse en un elemento HTML específico. Se puede usar para mostrar una alerta emergente cuando el mouse ingresa a una posición específica en un elemento HTML. Es compatible con todos los elementos HTML.
Sintaxis:
<element ng-mouseenter="expression"> content ... </element>
Ejemplo 1:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/
angular.min.js"></script>
<head>
<title>ng-mouseenter Directive</title>
</head>
<style type="text/css">
.outerDiv {
width: 100px;
height: 100px;
background-color: green;
margin-left:40px;
}
</style>
<body ng-app style="padding:30px">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>ng-mouseenter Directive</h2>
<div class="outerDiv" ng-mouseenter="oc=oc+1;outer=true"
ng-mouseleave="outer=false">
<p style="text-align:center;color:white">Mouse
{{outer==true?'Enter':'Out'}}</p>
<br />
<p style="text-align:center;color:white">
{{oc}}<br /></p>
</div>
</body>
</html>
Salida:
Antes de Mouseenter: 
Después de Mouseenter:
Ejemplo 2:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/
angular.min.js"></script>
<head>
<title>ng-mouseenter Directive</title>
</head>
<body ng-app="app" style="text-align:center">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>ng-mouseenter Directive</h2>
<div ng-controller="app">
Input: <input type="text" ng-mouseenter="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>
Salida:
Antes de Mouseenter: 
Después de Mouseenter:
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA