title: CSS: Display div on hover
body: <p>Consider following HTML, I have a div class <code>magic</code> inside <code>main</code>. The <code>magic</code> class is hidden by default (with CSS <code>display:none</code>). I want to show the div class <code>magic</code> if the mouse goes anywhere in the <code>main</code> div. Can this be done with CSS only? or it has to use jQuery?</p>
  
  <pre><code>&lt;div class="main"&gt;       
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
          &lt;div class="magic"&gt;
              Hello, world
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.main{  
      width: 400px; 
      border:1px solid red;
  }
  
  .magic{
      display:none; 
      margin-top:10px; 
      background:yellow; 
      padding:5px;
  }
  </code></pre>
  
  <p><strong>jsFiddle:</strong>
  <a href="http://jsfiddle.net/uRrn8/1/" rel="nofollow">http://jsfiddle.net/uRrn8/1/</a></p>
  
  <p>Thanks for any help.</p>