title: setting opacity with css :hover doesn't work for child element
body: <p>I am trying to make a link appear when the mouse is hovered above a div, but i can't get it to work. </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="rendezvous" style="position: relative"&gt;
      &lt;img src="http://placehold.it/50x50" /&gt;
      &lt;div class="remover" style="width: 32px; position: absolute; top: 0px; left: 15px; opacity: 0;"&gt;
          &lt;a href="#"&gt;Link&lt;/a&gt;
      &lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.rendezvous:hover .remover {
      opacity: 0.5;
  }
  </code></pre>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/6uLTr/" rel="nofollow">http://jsfiddle.net/6uLTr/</a></p>
  
  <p>The curious thing is that the css selector works, i can test it by setting the border for example. But the same method doesn't work when i set the opacity. What am i doing wrong here?</p>