La directiva ng-mouseover en AngularJS se usa para aplicar un comportamiento personalizado cuando se produce un evento de mouseover en un elemento HTML específico. Se puede usar para mostrar una alerta emergente cuando el mouse se mueve sobre un elemento específico. Es compatible con todos los elementos HTML.
Sintaxis:
<element ng-mouseover="expression"> Contents... </element>
Ejemplo 1: este ejemplo utiliza la directiva ng-mouseover para mostrar el contenido cuando el mouse se mueve sobre el elemento.
<!DOCTYPE html>
<html>
<head>
<title>ng-mouseover Directive</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<style type="text/css">
.geek {
border: 1px solid black;
width: 400px;
background-color: green;
border-radius: 4px;
height: 20px;
color: white;
}
</style>
</head>
<body ng-app="">
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>ng-mouseover Directive</h2>
<div ng-init="geek=false">
<button ng-mouseover="geek=true"
ng-mouseleave="geek=false">
Mouse over me!
</button>
<br><br>
<div class="geek" ng-show="geek">
GeeksforGeeks is the computer
science portal for geeks.
</div>
</div>
</center>
</body>
</html>
Salida:
Antes de pasar el mouse sobre el elemento: 
Después de pasar el mouse sobre el elemento:
Ejemplo 2: este ejemplo utiliza la directiva ng-mouseover para mostrar un mensaje de alerta cuando el mouse se mueve sobre un elemento.
<!DOCTYPE html>
<html>
<head>
<title>ng-mouseover Directive</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="app" style="text-align:center">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>ng-mouseover Directive</h2>
<div ng-controller="app">
Input: <input type="text" ng-mouseover="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 pasar el mouse sobre el elemento: 
Después de pasar el mouse sobre el elemento:
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