我目前正在制作导览模式,并突出显示元素,让它们从较暗的半透明背景中脱颖而出.

所以基本上,我有一个选择器的元素,我不想被覆盖,然后我用半透明的黑色divs,模拟一个排除的元素的叠加.

我的解决方案适用于一个突出显示的元素,但是当该数字变为2时,很难计算如何将黑色div围绕在这些元素上.事情是：突出显示的需求将从页面到页面显着不同 – 它不像那些多个元素将是静态的.

所以说明我的问题：

在这里,您可以看到需要放入页面的不同框,以便使用半透明黑色div来包围Box2和Box2,基本上模拟了突出显示的元素的叠加效果.对于像这样的一种情况,我可以硬编码计算,一切都会好起来的,但是Box1比Box2高吗？那么如果他们不是水平地重叠呢？如果有需要突出显示的Box3怎么办？

在任何一种情况下,我不知道有多少个黑盒子要放置和放置在哪里.

有没有什么数学公式会帮助我在这种情况下？使用jQuery也是可能的,因为它包含在我的项目中.

我将如何处理这个问题并使其可扩展(多个框,不同的位置)？