En este artículo, veremos cómo ejecutar el código cuando el mouse sale a un área específica usando jQuery. Para ejecutar el código en una hoja del mouse en un área específica, se usa el método mouseleave() . El método mouseleave() funciona cuando el puntero del mouse deja el elemento seleccionado.
Sintaxis:
$(selector).mouseleave(function)
Parámetros: este método acepta una función de parámetro único que es opcional. Se utiliza para especificar la función que se ejecutará cuando se llame al evento mouseleave.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to run code on mouseleave
event in jQuery ?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$(".main").mouseleave(function() {
$(".main").css({
background: "green",
color: "white"
});
});
$(".main").mouseenter(function() {
$(".main").css({
background: "none",
color: "black"
});
});
});
</script>
<style>
.main {
width: 300px;
height: 200px;
border: 2px solid black;
}
</style>
</head>
<body>
<center>
<div class="main">
<h1>GeeksforGeeks</h1>
<h3>
How to run code on mouseleave
event in jQuery ?
</h3>
</div>
</center>
</body>
</html>
Producción:
