title: show hidden div I when hover over it
body: <p>I have a hidden div, as in it has the property: <code>display:none</code>. I need to show it when I hover it and not another element, which means, I want it to appear, or <code>display:block</code> as soon as I hover over IT. I have found questions where they are working on the case where you show the div when you hover on the div containing that hidden div: <a href="https://stackoverflow.com/questions/14422784/show-hidden-div-on-hover">Show hidden div on hover</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;a href="#" id="case1"&gt;&lt;div&gt;my hidden div&lt;/div&gt;&lt;/a&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#case1{
      display: none;
  }
  </code></pre>
  
  <p><strong>If you could give me a bonus and answer this related question as well i'd be thankful:</strong></p>
  
  <p>I have hidden div, that I want to show when I hover over a seperate <code>a href</code> link. but for some reason it is not working:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;nav&gt;
          &lt;ul id="pics"&gt;
            &lt;li&gt;&lt;a href="#"&gt;&lt;img src="img1"&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;!--other &lt;li&gt;--&gt;
          &lt;/ul&gt;
          &lt;ul id="menu"&gt;
            &lt;li&gt;&lt;a href="#"&gt;show img1&lt;/a&gt;&lt;/li&gt;
            &lt;!--other &lt;li&gt;--&gt;
          &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>I want to hide img1 and show it when I hover on the <code>a href</code> that says show img1. </p>
  
  <p>All help is really appreciated. Thanks</p>