jquery – 如何屏蔽div的一部分以便在后面看到它？

我正在寻找一种方法来掩盖div的一部分,以便后面的内容是可见的.

看看我的例子,我想用某种面具替换黑色圆圈,这样当它向下滑动时,可以看到正在显示的文本(或背景图像).

jsfiddle

jQuery(document).ready(function() {
    $('.img').click(function() {
        $('.mid').slidetoggle('slow');
    });
});

解决方法

如果您只想使用CSS,那么您的问题就会有一个非常有创意的解决方案.将“黑洞”与其他部分分开的水平部分分为三部分：圆孔左侧,孔和右侧部分.在孔部分中,您实际上放置了一个没有背景的div和一个具有合适边框半径的边框.
由于您已经修复了所有宽度和高度测量值,因此进一步分离应该没有问题.

鲸鱼的最佳例子：http://www.subcide.com/experiments/fail-whale/

这适用于chomre 4.0,IE 9,Firefox 3,Safari 3.1和5以及Opera 10.5确保还包含相应的前缀(-moz-和-webkit-)