Function mouseout on icon

Question

I would like when hovering over the search icon to load an input field.

html

<div id="navbar" class="navbar-collapse collapse pull-right">
      <ul class="nav navbar-nav">
          <li><a href="contato"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a></li>
      </ul>

</div> <!-- /#navbar -->

Answer 1

You can use to add a "listener" to the event type mouseover, when listening to this event, you add a input where you want it. Likewise, you should remove the inputwhen user takes mouse from input, listening to an event of the type mouseout. Let me give you an example where when you take the mouse out the input does not go out, but when the user takes the focus of the input.

$(function() {
  $("#contato").on("mouseover", function() {
    $(this).parent().prepend("<input class='form-control input-lg' type='text' placeholder='Pesquisar..'/>");
    $(this).parent().find("input").focus().on("blur", function() {
      $(this).remove();
    });
  });

});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<ul class="nav navbar-nav">
  <li><a href="contato" id="contato"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a>
  </li>
</ul>

Do a test by hovering over the icon then clicking out to lose the focus of the input.

The details will depend on you now.

Alternatively, you can use the plugin Expadingsearchbar.