Hay dos formas de crear un complemento que pueda agregar y eliminar una clase al pasar el mouse sobre un elemento HTML.
Requisito previo: complementos de jQuery
Enfoque 1: usar los métodos this property & hover() y toggleClass() en jQuery.
Se crea un complemento simple $.fn.hoverClass = function(e) {..} con una función anónima adjunta. El parámetro » e » toma una clase para agregar o eliminar al pasar el mouse. Esta función devuelve el método hover() que se adjunta al elemento HTML usando este complemento debido al hecho de que se usa esta propiedad. Otra función anónima se define dentro de este método hover() que alterna entre agregar y eliminar la clase en el elemento HTML usando el método toggleClass() y thispropiedad, esta vez en forma de objeto jQuery, lo que significa que podemos vincular métodos jQuery a ese elemento en particular. La clase que se alterna se pasa en el parámetro del método adjunto al complemento como se discutió anteriormente.
Ejemplo: El siguiente ejemplo ilustra el uso de un complemento para agregar y eliminar una clase » al pasar el mouse » que cambia el color de fondo y el color de fuente de un elemento de división .
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!-- Basic inline styling -->
<style>
body {
text-align: center;
}
h1 {
color: green;
font-size: 40px;
}
p,
div {
font-size: 30px;
font-weight: bold;
}
div {
display: inline-block;
cursor: pointer;
padding: 0.5rem;
background-color: #222221;
color: lightgreen;
}
.on-hover {
background-color: green;
color: white;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<p>jQuery - Add and remove a class on hover using a plugin</p>
<div>Geeks</div>
<script type="text/javascript">
(function ($) {
$.fn.hoverClass = function (e) {
return this.hover(function () {
$(this).toggleClass(e);
});
};
})(jQuery);
$("div").hoverClass("on-hover");
</script>
</body>
</html>
Producción:
Enfoque 2: usar los métodos this property & hover() , addClass() y removeClass() en jQuery.
Se crea el mismo complemento $.fn.hoverClass = function(e) {..} que antes, pero la diferencia clave es que hay dos funciones anónimas separadas definidas dentro del método hover() en lugar de una función anónima. La primera función anónima agrega una clase al elemento HTML usando el método this object & addClass() en jQuery y la segunda función anónima elimina una clase del elemento HTML usando el método this object & removeClass() en jQuery. Estas dos funciones anónimas juntas tienen el mismo efecto que el método toggleClass() en jQuery, lo que lleva al efecto deseado.
Ejemplo: El siguiente ejemplo ilustra el uso de un complemento para agregar y luego eliminar una clase » al pasar el mouse » que cambia el color de fondo y el color de fuente de un elemento de división .
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!-- Basic inline styling -->
<style>
body {
text-align: center;
}
h1 {
color: green;
font-size: 40px;
}
p,
div {
font-size: 30px;
font-weight: bold;
}
div {
display: inline-block;
cursor: pointer;
padding: 0.5rem;
background-color: #222221;
color: lightgreen;
}
.on-hover {
background-color: green;
color: white;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<p>jQuery - Add and remove a class on hover using a plugin</p>
<div>Geeks</div>
<script type="text/javascript">
(function ($) {
$.fn.hoverClass = function (e) {
return this.hover(
function () {
$(this).addClass(e);
},
function () {
$(this).removeClass(e);
}
);
};
})(jQuery);
$("div").hoverClass("on-hover");
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por rajatsandhu2001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA