title: How to show a div only on mouse hover and hide when mouse leaves
body: <p>I have a menu and I am trying to show it only when an image icon is hovered using jquery Please help me. I have used the following code but it doesn't work. It makes it appear but don't disappear it when mouse leaves.</p>
  
  <pre><code>$(document).ready(function() {
      $(".hover").on("mouseenter", function() {
          $(".overlay").show();
      }).on("mouseleave", function() {
          $(".overlay").hide();
      });
  });
  </code></pre>
  
  <p>Here is Html</p>
  
  <pre><code>&lt;----div which is to be hovered----&gt;
  &lt;div class="box"&gt;&lt;img alt="101helper-menu" class="hover" src="http://2.bp.blogspot.com/-JzmiWYq3mb4/VYHPosbeBcI/AAAAAAAACuI/J0EQbhp2oKY/s1600/menu-icon-101helper.png"&gt;
  </code></pre>
  
  <p><strong>&lt;----div which is to be shown on hover and disappear on mouse leave----></strong></p>
  
  <pre><code>&lt;div class="overlay"&gt;
  &lt;div id="cssmenu"&gt;&lt;ul&gt;&lt;li&gt;&lt;a href="http://101helper.blogspot.com"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="http://101helper.blogspot.com/search/label/Blogger%20Tips%20And%20Tricks"&gt;Blogger Tips and tricks&lt;/a&gt;&lt;/li&gt;
  &lt;li class="active has-sub"&gt;&lt;a href="http://101helper.blogspot.com/search/label/Blogger%20Seo%28Search%20Engine%20Optimization"&gt;Seo&lt;/a&gt;&lt;ul&gt;
  &lt;li&gt;&lt;a href="http://101helper.blogspot.com/search/label/Blogger%20Seo%28Search%20Engine%20Optimization"&gt;Blogger Seo&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="http://101helper.blogspot.com/search/label/Google%20Webmaster%20Tools%20tutorials"&gt;Google Webmaster Tools&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="http://101helper.blogspot.com/search/label/Blogger%20menus"&gt;Menus for blogger&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="http://101helper.blogspot.com/search/label/Blogger%20Widgets%20And%20Gadgets"&gt;Blogger widgets and gadgets&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="http://101helper.blogspot.com/search/label/Beginner%20to%20blogging"&gt;Beginner to blogging&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="http://101helper.blogspot.com/search/label/Mobile%20Blogging"&gt;Mobile blogging&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="http://101helper.blogspot.com/p/about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="http://101helper.blogspot.com/p/hire-us.html"&gt;Hire us&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="http://101helper.blogspot.com/p/contact-me.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="http://101helper.blogspot.com/p/menusitemap.html"&gt;Sitemap&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>