jQuery es una de las poderosas bibliotecas de JavaScript que tiene muchos métodos poderosos que hacen que la manipulación de DOM sea mucho más simple usando los selectores.
En este artículo, veamos diferentes formas de cómo cambiar el peso de la fuente y el color de los párrafos al ingresar y salir del mouse usando jQuery.
Enfoque: Usando jQuery podemos agregar muchas funcionalidades durante los eventos DOM . Podemos agregar animaciones CSS como ocultar, mostrar y muchos otros efectos usando jQuery.
Podemos agregar una clase que contenga el CSS usando el método addClass() en el evento mouseenter y eliminar la clase usando removeClass() en el evento mouseleave seleccionando la etiqueta p con el selector.
Método 1: Agregar funciones individuales en eventos mouseenter y mouseleave.
Sintaxis:
$('selector').eventname(function())
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<!-- Including jQuery -->
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js"
integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<style>
h1 {
color: #006600;
}
/* Changes the div's background
color to red */
.adder {
color: #006600;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Geeks for Geeks</h1>
<p>
When compared with C++, Java codes are
generally more maintainable because Java
does not allow many things which may
lead bad/inefficient programming if used
incorrectly. For example, non-primitives
are always references in Java. So we
cannot pass large objects(like we can do
in C++) to functions, we always pass
references in Java. One more example,
since there are no pointers, bad memory
access is also not possible.
</p>
<p>
Python is a high-level, general-purpose
and a very popular programming language.
Python programming language (latest
Python 3) is being used in web development,
Machine Learning applications, along with
all cutting edge technology in Software
Industry. Python Programming Language is
very well suited for Beginners, also for
experienced programmers with other
programming languages like C++ and Java.
</p>
<script>
$(document).ready(function () {
$("p").mouseenter(function () {
$("p").addClass("adder");
});
$("p").mouseleave(function () {
$("p").removeClass("adder");
});
});
</script>
</body>
</html>
Producción:
Método 2: Usar el método on() con múltiples eventos.
Sintaxis:
$('selector').on({
event1:function () {
// Code
},
event2:function () {
// Code
}
})
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<!-- Including jQuery -->
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js"
integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<style>
h1 {
color: #006600;
}
/* Changes the div's background
color to red */
.adder {
color: #006600;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Geeks for Geeks</h1>
<p>
When compared with C++, Java codes are
generally more maintainable because Java
does not allow many things which may
lead bad/inefficient programming if used
incorrectly. For example, non-primitives
are always references in Java. So we
cannot pass large objects(like we can do
in C++) to functions, we always pass
references in Java. One more example,
since there are no pointers, bad memory
access is also not possible.
</p>
<p>
Python is a high-level, general-purpose
and a very popular programming language.
Python programming language (latest
Python 3) is being used in web development,
Machine Learning applications, along with
all cutting edge technology in Software
Industry. Python Programming Language is
very well suited for Beginners, also for
experienced programmers with other
programming languages like C++ and Java.
</p>
<script>
$(document).ready(function () {
$("p").on({
mouseenter: function () {
$("p").addClass("adder");
},
mouseleave: function () {
$("p").removeClass("adder");
},
});
});
</script>
</body>
</html>
Producción:
Método 3: Aplicar el método CSS en eventos mouseenter y mouseleave en el elemento seleccionado.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<!-- Including jQuery -->
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js"
integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<style>
h1 {
color: #006600;
}
/* Changes the div's background
color to red */
.adder {
color: #006600;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Geeks for Geeks</h1>
<p>
When compared with C++, Java codes are
generally more maintainable because Java
does not allow many things which may
lead bad/inefficient programming if used
incorrectly. For example, non-primitives
are always references in Java. So we
cannot pass large objects(like we can do
in C++) to functions, we always pass
references in Java. One more example,
since there are no pointers, bad memory
access is also not possible.
</p>
<p>
Python is a high-level, general-purpose
and a very popular programming language.
Python programming language (latest
Python 3) is being used in web development,
Machine Learning applications, along with
all cutting edge technology in Software
Industry. Python Programming Language is
very well suited for Beginners, also for
experienced programmers with other
programming languages like C++ and Java.
</p>
<script>
$(document).ready(function () {
$("p").on({
mouseenter: function () {
// Changing css on mouseenter event
$("p").css({
color: "#006600",
"font-weight": "bold"
});
},
mouseleave: function () {
// Changing css on mouseleave event
$("p").css({
color: "black",
"font-weight": "normal"
});
},
});
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por lokeshpotta20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA