title: registering clicks on an element that is under another element
body: <p>I have elements that are under an element with opacity:0.5 that I want to be able to click on. How can I click "through" the topmost element?</p>
  
  <p>Here's an example that demonstrates my problem. Click on the boxes to toggle them on and off. You can edit it <a href="http://jsbin.com/uhehe/edit" rel="noreferrer">on jsbin</a> to try out your solution.</p>
  
  <p><strong>Bonus points if you can have the boxes toggle on hover.</strong></p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; 
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt; 
  &lt;head&gt; 
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt; 
  &lt;title&gt;Sandbox&lt;/title&gt; 
  &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8" /&gt; 
  &lt;style type="text/css" media="screen"&gt; 
  body { background-color: #000; } 
  .box {width: 50px; height: 50px; border: 1px solid white} 
  .highlight {background-color: yellow;} 
  &lt;/style&gt;
  &lt;script type="text/javascript"&gt;
  var dthen = new Date();
  $('&lt;div id="past"&gt;').css({'height':  (dthen.getMinutes()*60)+dthen.getSeconds() +'px'
              ,'position': 'absolute'
              ,'width': '200px'
              ,'top': '0px'
              ,'background-color': 'grey'
              ,'opacity': '0.5'
              })
          .appendTo("#container");
  
  setInterval(function(){
      dNow = new Date();
      $('#past').css('height', ((dNow.getSeconds()+(dNow.getMilliseconds()/1000))*50)%300 +'px');
  },10)
  
   $(".box").click(function(){
        $(this).toggleClass("highlight");
      });
  &lt;/script&gt;
  &lt;/head&gt; 
  &lt;body&gt; 
    &lt;div id="container"&gt; 
       &lt;div class="box" style="position:absolute; top: 25px; left: 25px;"&gt;&lt;/div&gt; 
       &lt;div class="box" style="position:absolute; top: 50px; left: 125px;"&gt;&lt;/div&gt; 
       &lt;div class="box" style="position:absolute; top: 100px; left: 25px;"&gt;&lt;/div&gt; 
       &lt;div class="box" style="position:absolute; top: 125px; left: 125px;"&gt;&lt;/div&gt; 
       &lt;div class="box" style="position:absolute; top: 225px; left: 25px;"&gt;&lt;/div&gt; 
       &lt;div class="box" style="position:absolute; top: 185px; left: 125px;"&gt;&lt;/div&gt; 
    &lt;/div&gt; 
  &lt;/body&gt; 
  &lt;/html&gt;
  </code></pre>