En este artículo, aprenderemos cómo crear un div emergente al pasar el mouse y permanecer cuando haga clic usando jQuery.
Acercarse:
- Primero, creamos un elemento HTML div que queremos que aparezca cuando pasamos el mouse sobre un elemento y establecemos su propiedad de visualización en ninguno en estilo CSS.
display:none;
- En la etiqueta del script, creamos un indicador de variable y establecemos su valor en -1.
$flag = -1;
- Ahora, en la etiqueta del script, seleccionaremos el elemento sobre el que queremos pasar el mouse. Es un elemento HTML con clase gfg. Seleccionamos el elemento a con la clase gfg y luego usamos la función hover() que se usa para aplicar un efecto cuando pasamos el mouse sobre un elemento.
- Usamos dos funciones, la primera se ejecuta cuando ocurre el evento de entrada del mouse . Seleccionamos div con clase emergente y configuramos su propiedad de visualización para bloquear usando jQuery attr() . Cuando ocurre el evento de abandono del mouse , la segunda función se ejecuta con el valor de visualización de div en none cuando la bandera no es igual a -1.
Código JavaScript:
$("a.gfg").hover(
function () {
$("div.popup").attr("style", "display:block");
},
function () {
if ($flag == -1) {
$("div.popup").attr("style", "display:none");
}
}
);
- Agregamos un evento de clic de jQuery en el elemento a . Cuando hacemos clic en el elemento a, la función establece el valor de la bandera variable en 1, por lo que el elemento div permanece después de hacer clic.
$("a.gfg").click(function () {
$flag = 1;
});
Código HTML: a continuación se muestra la implementación completa del enfoque anterior.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- JQuery CDN -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<style>
center {
font-size: 30px;
color: green;
}
.popup {
display: none;
width: 500px;
border: solid red 3px
}
</style>
</head>
<body>
<center>
<p>
Hover <a href="#" class="gfg">here</a>
to see the changes.
</p>
<div class="popup">
GeeksforGeeks
</div>
</center>
<script>
$flag = -1;
$("a.gfg").hover(
function () {
$("div.popup").attr("style", "display:block");
},
function () {
if ($flag == -1) {
$("div.popup").attr("style", "display:none");
}
}
);
$("a.gfg").click(function () {
$flag = 1;
});
</script>
</body>
</html>
Producción:
Desplazamiento emergente del mouse
Publicación traducida automáticamente
Artículo escrito por nikhilchhipa9 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA