忽略覆盖div

我有一个中间有一个洞的覆盖层，可以作为其下面的图像的掩膜。我想用draggable（）拖动图像。然而，我找不到用鼠标忽略覆盖层的可靠方法（这是TR的TD用javascript创建了一个中间可变掩膜）。尽管我遇到了pointer-events: none。这正是我需要的。我也需要让它在IE8中工作。所以我需要更多的X浏览器友好的解决方案。忽略覆盖div

任何帮助表示赞赏。

<div class="workspace"> 
    <!-- <div id="color_overlay"></div> --> 
    <table border="0" cellpadding="0" cellspacing="0" class="overlay"> 
     <tr> 
      <td colspan="3">&nbsp;</td> 
     </tr> 
     <tr id="drawbox_tr"> 
      <td class="drawbox_side"></td> 
      <td id="drawbox">&nbsp;x</td> 
      <td class="drawbox_side"></td> 
     </tr> 
     <tr> 
      <td colspan="3">&nbsp;</td> 
     </tr> 
    </table> 
    <div id="image"></div> 
</div>

和CSS：

.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; 
}

编辑：我所做的指针事件（http://www.envyum.nl/pointer/）的一个小的演示。在Chrome中，例如，通过制作pointer-event: none，它就像魅力一样。在IE8中没有任何反应。但我仍然需要IE8。必须有一些解决方法，使其忽略覆盖，并使其下面的图像可调整大小和拖动，对不对？

来源

2013-03-05 CaptainCarl

会很高兴地看到此代码的运行。 http://jsfiddle.net/或类似的东西，以显示代码工作将不胜感激。 – 2013-03-05 09:01:50

对已故的评论抱歉。请参阅我的编辑。 – CaptainCarl 2013-03-06 10:28:22