Antes de aprender la diferencia entre el método hover() y mouseover() de jQuery, veamos brevemente ambos métodos.
Método hover(): cuando pasamos el cursor del mouse sobre cualquier elemento, ocurren dos eventos, es decir , mouseenter y mouseleave .
- mouseenter: Cuando llevamos el cursor sobre el elemento.
- mouseleave: Cuando quitamos el cursor del elemento.
El método hover() vincula controladores para eventos mouseenter y mouseleave . Básicamente, con el método hover() , especificaremos qué hacer cuando el cursor ingrese al elemento y especificaremos qué hacer cuando el cursor abandone ese elemento.
Sintaxis:
$( selector ).hover( handlerIn, handlerOut )
Parámetros: Acepta dos funciones, es decir, handlerIn y handlerOut.
- handlerIn: Esta función se ejecutará cuando el cursor ingrese al elemento.
- handlerOut: (Opcional) Esta función se ejecuta cuando el cursor abandona el elemento.
Cuando proporcionamos solo una función como argumento para el método hover() , entonces esa función se ejecutará para los eventos mouseenter y mouseleave .
Ejemplo: En este ejemplo, veremos cómo usar el método hover() . Tenemos una palabra e intentaremos cambiar el color cada vez que el cursor ingrese al elemento. El color volverá a cambiar cuando el cursor abandone ese elemento.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- jQuery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
</head>
<body>
<h2>GeeksforGeeks</h2>
<script>
// Calling hover() method
// on h1 tag
$("h2").hover(
// mouse-enter event
function () {
// changing the color
$("h2").css('color', 'green')
},
// mouse-leave event
function () {
// Putting the color back
$("h2").css('color', 'black')
})
</script>
</body>
</html>
Producción:
método de desplazamiento
Método Mouseover(): El método mouseover() se ejecutará cuando ocurra el evento mouseover . El evento mouseover ocurre cuando el cursor ingresa al elemento y luego se ejecutará el método mouseover() para ese elemento. También podemos adjuntar una función que se ejecutará cuando se llame al método mouseover() .
Sintaxis:
$(selector).mouseover(handler)
Parámetro: (Opcional) Acepta una función que será ejecutada cuando se llame al método mouseover() .
Ejemplo: En este ejemplo, veremos cómo usar el método mouseover().
HTML
<!DOCTYPE html>
<html>
<head>
<!-- jQuery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
</head>
<body>
<h2>GeeksforGeeks</h2>
<script>
$("h2").mouseover(
function () {
// changing the color
$("h2").css('color', 'red')
})
</script>
</body>
</html>
Producción:
Diferencia entre los métodos hover() y mouseover():
|
flotar() |
ratón sobre() |
|---|---|
| Vincule dos controladores a los elementos coincidentes, para que se ejecuten cuando el cursor entre y salga de los elementos. | Vincule un controlador a los elementos coincidentes, para que se ejecute cuando el cursor ingrese a los elementos. |
| Acepta un máximo de dos funciones como argumentos, una para el evento mouseenter y otra para el evento mouseleave . | Acepta un máximo de una función como argumento que se ejecutará cuando ocurra un evento de mouseover . |
| En el método hover() , cuando el cursor ingresa al elemento o su elemento secundario, la función handlerIn se llama una vez y cuando el cursor sale del elemento, la función handlerOut se llama una vez. | En el método mouseover() , funciona igual que en el método hover() , pero en el caso de elementos anidados, cuando el cursor ingresa a la parte exterior en la que se adjunta el evento mouseover, se llama al método mouseover() , pero cuando el cursor ingresa a la parte interna, el método mouseover() vuelve a llamar. |
| La función handlerIn y handlerOut se llamará una vez por elemento por entrada y salida | Este método puede activarse varias veces en el caso de los elementos anidados. |
Publicación traducida automáticamente
Artículo escrito por hritikrommie y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA