我有两个元素，一个圆形和一个正方形（2个不同的div）。正方形在圆形的上面，但是它阻挡了下面元素的悬停效果（例如，圆形变成蓝色）。对正方形应用悬停效果不起作用，因为悬停效果应用于圆形的每个部分。
在实际示例中（请参见第二个图像），您可以看到圆通过倾斜和旋转变换被分割。
我不想使用JavaScript，只想使用CSS和HTML。
I simplified the problem in this CodePen: codepen.io/tuurtie/pen/XWYPWEb.

这是实际结果的图像（红色是阻挡圆形悬停效果的部分）：

我试过用两种方法都溢出，也试过在正方形上打个洞，但这仍然阻挡了悬停。我知道我很接近了!
我还为红色正方形本身添加了悬停效果，但是悬停效果不起作用（悬停效果应用于圆形的每个部分）。