注意:我将与背景互换使用这个词.
@H_502_2@我目前正在制作导览模式,并突出显示元素,让它们从较暗的半透明背景中脱颖而出.
@H_502_2@所以基本上,我有一个选择器的元素,我不想被覆盖,然后我用半透明的黑色divs,模拟一个排除的元素的叠加.
@H_502_2@我的解决方案适用于一个突出显示的元素,但是当该数字变为2时,很难计算如何将黑色div围绕在这些元素上.事情是:突出显示的需求将从页面到页面显着不同 – 它不像那些多个元素将是静态的.
@H_502_2@所以说明我的问题:
@H_502_2@
@H_502_2@在这里,您可以看到需要放入页面的不同框,以便使用半透明黑色div来包围Box2和Box2,基本上模拟了突出显示的元素的叠加效果.对于像这样的一种情况,我可以硬编码计算,一切都会好起来的,但是Box1比Box2高吗?那么如果他们不是水平地重叠呢?如果有需要突出显示的Box3怎么办?
@H_502_2@在任何一种情况下,我不知道有多少个黑盒子要放置和放置在哪里.
@H_502_2@有没有什么数学公式会帮助我在这种情况下?使用jQuery也是可能的,因为它包含在我的项目中.
@H_502_2@我将如何处理这个问题并使其可扩展(多个框,不同的位置)?
解决方法
你太过分了!
您可以通过一定的HTML和CSS布局实现您要查找的内容. @H_502_2@你必须使用类似的布局:
您可以通过一定的HTML和CSS布局实现您要查找的内容. @H_502_2@你必须使用类似的布局:
.container .overlay .Box .Box .Box .Box@H_502_2@诀窍是使用全宽,半透明的叠加层,并带来需要突出显示的元素.非常重要的是将指针事件:none指定给overlay,以便您可以点击它! @H_502_2@使.Box具有z-index值,例如1,而.overlay的z-index值为100.为了突出显示某个.Box,将z-index设置为101.这样它将突出显示. @H_502_2@我现在在手机上,但是我在Codepen上提供了一个基本的概念证明.点击框以突出显示它们,再次点击撤消.与多个盒子配合使用!