1

El problema es que cuando quiero ponerme en la barra de búsqueda se me oculta de nuevo y no se como hacer que se quede cuando estoy encima de ella.

    <div style="display: none;" class="input-group mb-3" id="barra">
    <input type="text" class="form-control" placeholder="Buscar..."/>
    <div class="input-group-append">
            <button class="btn btn-dark fas fa-search" type="button"></button>
    </div>
</div>

El script de Jquery que tengo es el siguiente:

$(document).ready(function () {
    $("#buscador").hover(function () {
        $("#barra").slideToggle();
    });
});

El id "buscador" hace referencia a un elemento de una lista

1 respuesta 1

2

Creo que lo más fácil en tu caso es crear un div container que contenga tanto al enlace como al input y que hagas bind al evento hover de dicho container en vez de al #buscador. Te dejo un ejemplo:

$(document).ready(function () {
    $("#container").hover(function (e) {
        $("#barra").slideToggle();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="buscador">Buscar</div>
  <div style="display: none;" class="input-group mb-3" id="barra">
      <input type="text" class="form-control" placeholder="Buscar..."/>
      <div class="input-group-append">
              <button class="btn btn-dark fas fa-search" type="button"></button>
      </div>
  </div>
</div>

Edito Ojo con el width del container. Tendrás que ajustarlo a tu contenido para que no ocupe todo el ancho y se lance el hover cuando no quieres.

Tu Respuesta

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

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