title: Display an element when hover on another
body: <p>I want to display the element <code>#b</code> when the user hovers on <code>#a</code>. On page load <code>#b</code> will be set to <code>display: none</code>.</p>
  
  <pre><code>&lt;div&gt;
    &lt;ul&gt;
      &lt;li id="a"&gt;Suite&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;div&gt;
      &lt;img id="b" src="img/image.png"&gt;
    &lt;/div&gt; 
  &lt;/div&gt;   
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>#b { display: none; }
  #a:hover #b { display: block; } /* Not Working */
  #a:hover &gt; #b { display: block; } /* Not Working */
  #a:hover + #b { display: block; } /* Not Working */
  #a:hover ~ #b { display: block; } /* Not Working */
  </code></pre>
  
  <p>I have tried many methods but none worked. This is a very simple thing, and it's not happening. Please help.</p>