Tengo una función jQuery que, en el flujo, muestra un DIV escondido de un lado y funciona bien. Lo que quería agregar es cuando me muevo a la DIV, IE box2, el DIV desaparece, por lo tanto, no puedo interactuar con el box2 ¿Cómo puedo hacer que la caja 2 permanezca obsoleta cuando se mueve en el cursor que se desvanece? de nuevo. Puedo hacerlo fácilmente con Vanilla Javascript, pero necesito el efecto de desvanecimiento jQuery, así que, ¿cómo puedo lograrlo con jQuery? Se aprecia cualquier ayuda. Gracias por adelantado.

$("#box1").hover(function(){
    $("#box2").fadeIn("slow");
},
function(){
    $("#box2").fadeOut();
});
.box1 {
  position: absolute;
  left: 4%;
  width: 20%;
  height: 10%;
  background-color: black;
}

.box2 {
  position: absolute;
  left: 24%;
  width: 20%;
  height: 30%;
  background-color: grey;
  display:none;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<div class="box1" id="box1"></div>
<div class="box2" id="box2"></div>
1
seriously 9 jun. 2021 a las 01:52

2 respuestas

La mejor respuesta

Aquí hay 2 formas de manejarlo. El que se comenta fuera, mantendrá el cuadro 2 visible hasta que esté fuera del ratón de la caja 2.

El otro (no comprometido) establecerá un temporizador y una prueba cortos para ver si aún está superando a la casilla 2. Creo que es el que está buscando.

let ontarget = false
$("#box1, #box2").hover(function(e) {
    $("#box2").fadeIn("slow");
    ontarget = e.target.id == 'box2'
  },
  function(e) {
    // keep open unless mouse out of box 2
    //if (e.target.id != 'box1') $("#box2").fadeOut();

    // after a short delay (100 ms) test to see if we're still over box2, if so do nothing.
    // though if we mouse out it will rerun this if statement to close it like you expect
    setTimeout(() => {
      if (!ontarget || e.target.id == 'box2') $("#box2").fadeOut();
      if (e.target.id == 'box2') ontarget = false
    }, 100)

  });
.box1 {
  position: absolute;
  left: 4%;
  width: 20%;
  height: 10%;
  background-color: black;
}

.box2 {
  position: absolute;
  left: 24%;
  width: 20%;
  height: 30%;
  background-color: grey;
  display: none;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<div class="box1" id="box1"></div>
<div class="box2" id="box2"></div>
1
Kinglish 8 jun. 2021 a las 23:44

Tienes un par de opciones aquí. Primero, puede envolver ambas cajas en un <div>, y simplemente modifique el código de jQuery para mostrar el div en Hover.

Otra opción podría ser usar el atributo CSS !important (es un mal hábito, sin embargo) agregar otra regla de estilo para mostrarla. Esto se vería como sigue:

.box2:hover {
     display:block;
}

¡Siéntase libre de comentar con cualquier pregunta! ¡Buena suerte!

0
Finn_Lancaster 8 jun. 2021 a las 23:01