title: HTML CSS3 Jquery hover menu
body: <p>I'm trying to build a CSS3 hover menu. I want to hover an image (like first photo) and then appear my menu (like second photo) and also I want to hide the first image. Finally, I want to keep the hover state if cursor is on the menu.</p>
  
  <p><a href="https://i.stack.imgur.com/riiy8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/riiy8.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/MmilC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MmilC.png" alt="enter image description here"></a></p>
  
  <p>Source code:</p>
  
  <pre class="lang-js prettyprint-override"><code>$("#div-right img").hover(function(){
      $('#div-right a').removeClass('hidden');
      $("#div-right img").css({opacity: "0"});
  },function(){
      $('#div-right a').addClass('hidden');
      $("#div-right img").css({opacity: "1"});    
  });
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="div-right"&gt; 
      &lt;a class="hidden" href="index.html" class="m1"&gt;HOME&lt;/a&gt; 
      &lt;a class="hidden" href="#" class="m2"&gt;ABOUT&lt;/a&gt; 
      &lt;a class="hidden" href="#" class="m3"&gt;CONTACT&lt;/a&gt;
      &lt;img src="images/menu-01.png" style="position:relative; right:30px;"&gt; 
  &lt;/div&gt;  
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>#div-right a hidden{
      display:none;
  }
  </code></pre>