title: Why does opacity negate pointer events?
body: <p>In the following setup, why does the click event (and any other pointer event) not get fired?</p>
  
  <p>If you remove the <code>opacity: 0.5</code> line, it will work fine.</p>
  
  <p><a href="http://jsfiddle.net/523ve/" rel="nofollow">http://jsfiddle.net/523ve/</a></p>
  
  <p>For posterity, in case jsFiddle ever goes down (December 21 <em>is</em> approaching):</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div&gt;
      &lt;a&gt;Click&lt;/a&gt;
      &lt;p&gt;Paragraph&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>div { position: relative; margin: 40px; }
  a { position: absolute; top: 0; right: 0; }
  p { opacity: 0.5; }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(document).ready(function(event) {
      $("a").click(function(event) {
          alert("Alert");
      });
  });
  </code></pre>
  
  <p>(Tested in latest stable Chrome and Firefox)</p>