Mouseout function on icon

Question

Mouseout function on icon

Navigation

#1 by (1 votes)

1

Iwouldliketohoveraninputfieldwhenhoveringoverthesearchicon.

html

<divid="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 -->

javascript html jquery

asked by anonymous 24.01.2017 / 00:06

1 answer

Error in counting data numbers of a table using JOIN in laravel 5.3 [closed] Define a session variable by clicking on a link

score 1 · Answer 1

You can use add a "listener" to the event of type mouseover , upon hearing this event, you add a input where you want it. Likewise, you should remove input when user takes the mouse out of the input, listening for an event of type mouseout . I will give an example where when the mouse is drawn the input does not exit, but rather, when the user takes the focus from 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><scriptsrc="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 outside to lose the focus of the input.

The details will depend on you now.

Alternatively, you can use the ExpadingSearchBar plugin.