JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" class="form-text text-hidden" title="Enter the terms you wish to search for." value="" size="15" id="edit-search-block-form-1" name="search_block_form" maxlength="128">
    
<input type="image" src="http://d3j5vwomefv46c.cloudfront.net/photos/large/802431483.png?1377197793" class="form-submit search-hover" alt="Search" id="edit-submit">

CSS

input#edit-search-block-form-1.form-text.text-hidden {
display: none;
}

input#edit-search-block-form-1.form-text.text-hidden.hover {
display: block;
    border: 1px solid #333;
}

.form-text.text-hidden {
position: absolute;
    left: 10px;
}

#edit-submit {
position: absolute;
    left: 130px;
}

body {
  width: 100%;
  height: 1200px;
}

JavaScript

$(".search-hover").hover(function () {
    $('.text-hidden').addClass('hover');
  });

  // Now remove the class in case of a false start or the user decides to do something else.
  $("body input:not(.text-hidden)").click(function(){
      //alert('The body click is working!!!');
    $('.form-text.text-hidden').removeClass('hover');
  });