是否可以使两个重叠的div都可单击？

我已经向两个容器追加了div。他们的风格完全相同，只是一个是和一个是。两者都在上面。我使每个附加的子项都可以单击以填充其背景色。到目前为止，只有顶部的div是可点击的，有没有办法让两者都可点击？还是有其他方法让底部div对我的点击做出反应？

查看codepen

顺晟科技：

一种方法是使用document.elementsfrompoint()返回“指定坐标处所有元素的数组”。遍历该数组，将“selected”类添加到“grid”元素。

在普通的HTML/CSS中，实际上不能同时悬停两个项--为此，您需要JavaScript，正如公认的解决方案中所解释的那样。但是，有一个仅限于CSS的解决方案允许在不同的层上悬停，这至少很有趣。

所以这个想法是你在可见的盒子上面有这些不可见的盒子。不可见的盒子只有边框，所以每当鼠标点击边框时，就会发生一些巧妙的Z索引交换，以使可见的容器改变它们的堆叠顺序。

您需要为每个项目创建相应的项目:https://jsfiddle.net/ryanwheale/01v5yz86/93/