title: Ignore overlay div
body: <p>I have an overlay with a hole in the middle functioning as a mask for the image underneath it. I want to drag the image around with draggable(). However, I can't find a solid way to ignore the overlay with my mouse(It's some TR's TD's creating a variable mask in the middle with javascript). I came across <code>pointer-events: none</code> though. And that's exactly what i need. I need to get it to work in IE8 too though. So i need a more X-browser friendly solution.</p>
  
  <p>Any help is appreciated.</p>
  
  <pre><code>&lt;div class="workspace"&gt;
      &lt;!-- &lt;div id="color_overlay"&gt;&lt;/div&gt; --&gt;
      &lt;table border="0" cellpadding="0" cellspacing="0" class="overlay"&gt;
          &lt;tr&gt;
              &lt;td colspan="3"&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr id="drawbox_tr"&gt;
              &lt;td class="drawbox_side"&gt;&lt;/td&gt;
              &lt;td id="drawbox"&gt;&amp;nbsp;x&lt;/td&gt;
              &lt;td class="drawbox_side"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="3"&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
      &lt;div id="image"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And CSS:</p>
  
  <pre><code>.container .workspace {
      float: left;
      width: 75%;
      height: 100%;
      overflow: hidden;
      background: pink;
      position: relative;
  }
  
  .workspace .overlay {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 2;
      margin: 0px;
      padding: 0px;
      cursor: pointer;
  }
  
  .workspace .overlay td, .workspace .overlay tr {
      margin: 0px;
      padding: 0px;
  }
  
  .workspace .overlay td {
      opacity: 0.5;
  }
  
  .workspace #image {
      position: absolute;
      z-index: 1;
      border: 1px solid #000;
  }
  </code></pre>
  
  <p>edit:
  I've made a little demo of the pointer-event(<a href="http://www.envyum.nl/pointer/" rel="nofollow">http://www.envyum.nl/pointer/</a>). In Chrome for example it works like a charm by making the <code>pointer-event: none</code>. In IE8 nothing happens. But i still need it for IE8 though. There must be some workaround which makes it ignore the overlay and make the image below it resizable and draggable, right?</p>