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 () {
    $('#search-text').show();
}, function () {
    $('#search-text').hide();
});

However at the moment once you hover over the button it will display the text box but as soon as you try to hover over the text box it will disappear. Is there a way to have the text box remain on the page when you hover over it too.

Here is a Fiddle to describe the problem

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 () {
    $('#search-text').show();
}, function () {
    $('#search-text').hide();
});

However at the moment once you hover over the button it will display the text box but as soon as you try to hover over the text box it will disappear. Is there a way to have the text box remain on the page when you hover over it too.

Here is a Fiddle to describe the problem

• javascript
• jquery
• html
• css

• Share the code what you have done so far. – Tushar Commented Jan 19, 2015 at 12:43
• 2 @Tushar Pretty sure thats the code the OP is using... – Master Yoda Commented Jan 19, 2015 at 12:43
• This can be done using CSS as well, thats the reason I am asking for the code. – Tushar Commented Jan 19, 2015 at 12:45
• 1 It is possible to keep it on if you hover over both, but there is space (typically) between elements, and even if for a split second, the mouse won't be in the right place. I'd be concerned about that. – Raymond Camden Commented Jan 19, 2015 at 12:47
• 1 As far as I can see, the text box disappears because your code tells to hide it when pointer leaves the search button. Are search text and search button overlapped? – Giorgio Commented Jan 19, 2015 at 12:47

6 Answers 6

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

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

http://jsfiddle/ea45h80n/

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

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

<script src="https://ajax.googleapis./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>

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="search-text" type="text" /
><input id="search-button" type="button" value="Search" />

remove second function. which is onhoverout. use following:

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

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
});

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

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

   <input type="button" id="search-button" value="search"/>

   <input type="text" id="search-text" style="display:none;"/>