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 () { $('#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.

<a href="http://jsfiddle.net/x6q5do83/1/" rel="nofollow">Here is a Fiddle</a> to describe the problem


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 <strong>basic</strong> demo below:

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

<pre class="snippet-code-css lang-css prettyprint-override">button { display: none; } .search:hover button { display: inline-block; } .search { background: gray; display: inline-block; padding: 10px; } <pre class="snippet-code-html lang-html prettyprint-override"><div class="search"> <input type="text" placeholder="type here" /> <button>SEARCH</button> </div> <hr />

If, however, you are <em>forced</em> to use Javascript/jquery, then I won't duplicate it here, but refer to <a href="https://stackoverflow.com/a/28025037/3436942" rel="nofollow">chipChocolate.py's answer</a>


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

<a href="http://jsfiddle.net/ea45h80n/" rel="nofollow">http://jsfiddle.net/ea45h80n/</a>

<pre class="snippet-code-js lang-js prettyprint-override"> $('.search').hover(function() { $('#search-text').show(); }, function() { $('#search-text').hide(); }); $('#search-text').hide(); <pre class="snippet-code-html lang-html prettyprint-override"><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>


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

<pre class="snippet-code-js lang-js prettyprint-override">$('#search-text').hide(); $('#search-button, #search-text').hover(function() { $('#search-text').show(); }, function() { $('#search-text').hide(); }); <pre class="snippet-code-html lang-html prettyprint-override"><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" />


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


<pre class="snippet-code-js lang-js prettyprint-override">$('#search-button').hover(function () { $('#search-text').show(); }); <pre class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/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;"/>


  • Add Jpanel to Jframe NetBeans
  • How to convert Neo4j Result to GraphJSON
  • Recursion in ASP.NET Core Razor views
  • reduce/reduce conflicts using ocamlyacc
  • Build Matrix of Comparisons in SQl Server
  • Table striping rows in CSS Grid
  • c++ using primitive types as a base class
  • is it possible to insert a line break in this tooltip?
  • Wrapping a c#/WPF GUI around c++/cli around native c++
  • Creating NSCollectionView with datasource programatically
  • Why isn't my “Fizz Buzz” test in R working?
  • Angular Bootstrap Carousel Slide Transition not working correctly
  • Python PIL to extract number from image
  • ZipList with Scalaz
  • CodeIgniter URI Parameter is partially bypassing an “if” statement
  • abstracting over a collection
  • opencv display image without x server
  • How Lists (specifically, RecyclerView with CardViews) in Android work
  • C: Incompatible pointer type initializing
  • why xml file does not aligned properly after append the string in beginning and end of the file usin
  • Google Custom Search with transparent background
  • Android fill_parent issue
  • Repeat a vertical line on every page in Report Builder / SSRS
  • Insert into database using onclick function
  • Encrypt data by using a public key in c# and decrypt data by using a private key in php
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • DotNetZip - Calculate final zip size before calling Save(stream)
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • Validaiting emails with Net.Mail MailAddress
  • How to apply VCL Styles to DLL-based forms in Inno Setup?
  • Which linear programming package should I use for high numbers of constraints and “warm starts” [clo
  • Javascript + PHP Encryption with pidCrypt
  • When should I choose bucket sort over other sorting algorithms?
  • Weird JavaScript statement, what does it mean?
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • Unanticipated behavior
  • Load html files in TinyMce
  • Free memory of cv::Mat loaded using FileStorage API
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • Django query for large number of relationships