Jquery Search Box And Button

I've got a button and text box, when you hover over the button the search box will appear using this piece of JavaScript/jquery: $('#search-button').hover(function () { $('

Solution 1:

you don't need Jquery for this. A Css styling will do this for you!

By wrapping your content within an element, you can show/hide any (/all) elements within the wrapper. I've made a basic demo below:

please note the padding/background on the .search class are purely for demonstration, and can be edited/removed and still keep its functionality.

button {
  display: none;
}
.search:hover button {
  display: inline-block;
}
.search {
  background: gray;
  display: inline-block;
  padding: 10px;
}

<div class="search">
  <input type="text" placeholder="type here" />
  <button>SEARCH</button>
</div>

---

If, however, you are forced to use Javascript/jquery, then I won't duplicate it here, but refer to chipChocolate.py's answer

Solution 2:

A javascript solution to your problem. Check this jsfiddle link:

http://jsfiddle.net/ea45h80n/

 $('.search').hover(function() {
   $('#search-text').show();
 }, function() {
   $('#search-text').hide();
 });

 $('#search-text').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search">
  <button>SEARCH</button>
  <input type="text" placeholder="type here" id='search-text' />
</div>

Solution 3:

Attach the hover event to #search-button and #search-text.

$('#search-text').hide();

$('#search-button, #search-text').hover(function() {
  $('#search-text').show();
}, function() {
  $('#search-text').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="search-text" type="text" /
><input id="search-button" type="button" value="Search" />

Solution 4:

remove second function. which is onhoverout. use following:

  $('#search-button').hover(function () {
$('#search-text').show();
});

Solution 5:

This might Work

$('#search-text').hide(); //on DOM Load hide the element   

$('#search-button').mouseover(function() 
{
    $('#search-text').show(); //When mouse enters the element, then show the textbox input
});