Html 我能用同样的复选框攻击触发2个动作吗？CSS的使用

在这个例子中，我有一个侧菜单，在选中“checkbox hack”后从左侧滑动。当菜单出现时，如何在整个页面中放置阴影覆盖（将焦点放在侧菜单上）？我尝试对checkbox应用相同的方法，但似乎不起作用。有什么帮助吗

*{
保证金：0；
填充：0；
框大小：边框框；
}
/*无法修改复选框，因此请隐藏它*/
#汉堡包复选框{
显示：无；
}
/*使用标签代替*/
.汉堡包{
字体大小：30px；
位置：绝对位置；
z指数：99；
}
/*使用：选中以指示何时选中*/
#汉堡复选框：选中~.nav{
过渡：2秒轻松；
转换：translateX（0px）；
}
.导航{
宽度：200px；
高度：100vh；
背景：橙色；
转换：translateX（-200px）；
过渡：2秒轻松；
填充：40px 10px；
}
.导航a{
显示：块；
文本对齐：居中；
填充：10px；
}
.彩色套印{
位置：绝对位置；
左：0；
排名：0；
宽度：0；
身高：100%；
不透明度：.58；
背景：#787777；
过渡：0.1s缓解；
}
#汉堡复选框：选中~。颜色覆盖{
宽度：100%；
过渡：0.1s缓解；
}

☰

作为一种变体，您可以添加伪元素（已更新）：

*{
保证金：0；
填充：0；
框大小：边框框；
}
/*无法修改复选框，因此请隐藏它*/
#汉堡包复选框{
显示：无；
}
/*使用标签代替*/
.汉堡包{
字体大小：30px；
位置：绝对位置；
z指数：99；
}
/*使用：选中以指示何时选中*/
#汉堡复选框：选中~.nav{
过渡：2秒轻松；
转换：translateX（0px）；
}
#汉堡复选框：选中~。颜色覆盖{
不透明度：.58；
}
.导航{
宽度：200px；
高度：100vh；
背景：橙色；
转换：translateX（-200px）；
过渡：2秒轻松；
填充：40px 10px；
位置：相对位置；
}
.彩色套印{
宽度：100vw；
位置：固定；
高度：100vh；
背景：#787777；
排名：0；
左：0；
z指数：-1；
不透明度：0；
过渡期：不透明度和易用性；
}
.导航a{
显示：块；
文本对齐：居中；
填充：10px；
z指数：2；
位置：相对位置；
}

☰

这样，您将无法在复选框之前或在其他父元素中设置元素的样式。但是，您可以在菜单中添加一个伪元素，并在选中复选框时将其样式/位置设置为位于内容上方。谢谢@demkovych，尽管它看起来有点笨重，但似乎可以做到这一点。但是，对结果并不十分满意。我仍在测试它，看看我是否能创造一种幻觉，让覆盖层在整个屏幕中淡入，而不是像它看起来像一个容器一样滑入。很好的方法，我不得不承认你it@BrainStorm检查更新的答案。你需要玩一个适当的叠加过渡时间。好极了！这真是太棒了@demkovych！因此，您使用了不透明度和过渡时间。这是有道理的。答：黑客攻击之前根本不需要。太好了，再次谢谢你！