jquery - HTML/CSS : create hole in a div

Question

本质上，我想要实现的是在 div 中间打一个洞。后面有一个 100% 宽度的 div，它最终将成为一个滚动条，顶部上方将再次是一个 100% 宽度的 div，但中间有一个洞，可以从下面显示内容。目前我已经使用透明的 png 背景图像实现了这一点，但是后面的 .test div 需要可点击，所以我正在寻找更好的解决方案。
jsFiddle 演示:http://jsfiddle.net/neal_fletcher/vmTHL/1/
HTML:

<div class="test"></div>
<div class="background-image"></div>

CSS:

.test {
    position: absolute;
    width: 100%; height: 240px;
    background-color: red;
    top: 0; left: 0;
    z-index: 1;
    cursor: pointer;
}

.background-image {
    position: absolute; 
    width: 100%; height: 240px; 
    top: 0; left: 0;
    z-index: 2; 
    background-image:url('http://oi42.tinypic.com/2ziwodd.jpg'); 
    background-repeat:no-repeat; background-position:center;"
}

视觉上这就是我所追求的，但是 .test div 也需要可点击，任何建议将不胜感激!

Answer 1

使用两个 DIV。一个用于左侧，一个用于右侧。它们之间的孔的宽度必须小于 50%。