En este artículo, aprenderemos cómo cambiar el color de cualquier párrafo a rojo en un evento de mouseover.
Enfoque: esto se puede lograr utilizando el método on() de jQuery para adjuntar una función de controlador de eventos en un evento de mouseover. Este evento se activa cuando el usuario pasa el cursor sobre cualquier párrafo. El controlador del método on() se define como una función anónima que cambia el estilo CSS del párrafo utilizando el método css() en jQuery. Aplica el color rojo usando este enlace, cambiando así el color del párrafo en el que se hizo clic a rojo.
Sintaxis:
$("p").on("mouseover", function() {
$(this).css("color", "red");
});
Ejemplo: En este ejemplo, el elemento de párrafo cambiará a rojo cada vez que el usuario se desplace sobre él.
HTML
<html>
<head>
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
<style>
p {
color:blue;
font-size: 24px
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksForGeeks
</h1>
<p>
This paragraph's color will change
to red when hovered over.
</p>
<script>
// Add the mouseover event handler to
// the paragraph element
$("p").on("mouseover", function () {
// Set the text color of
// this element to red
$(this).css("color", "red");
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA