0

Estoy usando jQuery para hacer hover en el botón que activa una caja, la caja aparece... hasta ahí bien, pero no desaparece cuando ya se ha quitado el cursor, cómo puedo solucionar esto?

$('.hover').hover(function(){
  $('.box').css({
    "display": "flex"
  });
});
body{
    height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box{
    height: 200px;
    width: 200px;
    background-color: #ddd;
    display: none;
    align-items: center;
    justify-content: center;
}
<script 
    src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<div class="box">
    <h1>HOVER</h1>
</div>

<button class="hover">hover</button>

1 respuesta 1

2

Puedes usar el método mouseout:

$( "#ID" ).mouseout(function(){ });

Jquery .mouseout()

Quité el display flex del body y coloqué el botón en un div nada más para separarlos en el ejemplo ya que si lo dejas como está ocurre un problema y es que al pasar el mouse por encima aparece el elemento con el id box y mueve el botón por lo que el mouse deja de estar encima del mismo y por consiguiente desaparece el elemento con el id box. Debes tener eso en cuenta para tu caso.

$('.hover').hover(function(){
  $('.box').css({
    "display": "block"
  });
});

$('.hover').mouseout(function(){
  $('.box').css({
    "display": "none"
  });
});
body{
height: 100vh;
margin: 0;
align-items: center;
justify-content: center;
}
.box{
height: 200px;
width: 200px;
background-color: #ddd;
display: none;
align-items: center;
justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button class="hover">hover</button>
</div>

<div class="box">
<h1>HOVER</h1>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.