En este artículo, veremos cómo cambiar el estilo de los elementos en un evento flotante usando jQuery. Para cambiar el estilo del evento flotante, se usa el método hover(). El método hover() se usa para especificar dos funciones para comenzar cuando el puntero del mouse se mueve sobre el elemento seleccionado.
Sintaxis:
$(selector).hover(Function_in, Function_out);
Parámetro: Acepta dos parámetros que se especifican a continuación:
- Function_in: especifica la función que se ejecutará cuando se produzca el evento de movimiento del mouse.
- Function_out: es opcional y especifica la función que se ejecutará cuando se produzca el evento de movimiento del mouse.
Aquí, hemos creado un elemento de párrafo y cuando el mouse se mueve sobre el elemento de párrafo, el estilo del elemento cambiará.
Ejemplo:
HTML
<!DOCTYpe html>
<html>
<head>
<title>
How to run a code on hover
event in jQuery?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$(document).ready(function () {
$("p").hover(function () {
$(this).css({
backgroundColor: "green",
fontSize: "30px",
color: "white"
});
}, function () {
$(this).css("background-color", "yellow");
});
});
});
</script>
</head>
<body style="text-align: center;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
How to run a code on hover event in jQuery?
</h3>
<p>Welcome to GeeksforGeeks</p>
</body>
</html>
Producción:
