title: Non-opaque text in opaque background
body: <p>Spin on the popular question.  In this case, I have a div that I want to darken when I mouseover, while not darkening the text inside it.  I am halfway there; I can achieve this if I mouseover in the div anywhere besides the div that contains the text.</p>
  
  <p>Here is my attempt: <a href="http://jsfiddle.net/59M7N/" rel="nofollow">http://jsfiddle.net/59M7N/</a>.  Notice that if the mouse is over the top region of the box, the hover effect will not occur.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="text"&gt;Hello World&lt;/div&gt;
  &lt;div id="box"&gt;
      &lt;div id="opaque"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#box {
      height:200px;
      width:200px;
      border:5px solid black;
  }
  
  #opaque {
      position:absolute;
      width:200px;
      height:200px;
      background-color:black;
      opacity:0;
      -webkit-transition: opacity 0.3s ease-in-out;
      -moz-transition: opacity 0.3s ease-in-out;
      -ms-transition: opacity 0.3s ease-in-out;
      -o-transition: opacity 0.3s ease-in-out;
      transition: opacity 0.3s ease-in-out;
  }
  
  #opaque:hover {
      opacity:0.6;
  }
  
  #text {
      position:relative;
      color:blue;
      top:25px;
      left:10px;
      z-index:5;
  }
  </code></pre>