让我再解释一下,我想要一个大面积(全屏),其中有一个固定大小的洞.孔将跟随屏幕周围的鼠标.考虑将范围集中在页面上,页面的其余部分显示为灰色.
我需要在所有浏览器中有效地工作(包括IE 6).
我目前的解决方案使用4个div(顶部,右侧,底部,左侧)并以此方式形成孔.然而,这需要重新绘制整个屏幕并显示伪影(div具有背景图像以使该区域变灰).
是否有更好(更有效)的方法来实现这一点,任何人都可能遇到过？
注意:洞必须将所有事件传递到这些div下面的元素.
我建议使用一个部分不透明的div.它有透明的背景,但黑色边框.当鼠标移动时,调整边框的粗细.因为它部分不透明(比如50%),边框覆盖的部分看起来会变灰.请记住,边框可以像你想要的那样厚 - 甚至几百个像素.这样您就不需要使用图像,也不需要修改DOM - 只需更改单个div的样式属性即可.
编辑:刚刚注意到让鼠标事件通过的要求.我相信单一div解决方案在这里失败了.需要使用四格解决方案.但是,这仍然可以通过使用黑色,半透明的div(而不是背景图像)来完成.然后可以调整它们的大小(通过动态更改style对象)而不是删除和重新创建(不确定这是OP通过"重新绘制"的意思).