SVG中不同角度的旋转元素

Question

我正在尝试创建一个svg，当您将鼠标悬停在图像中的一个元素上时，它将触发图像其他部分的不同动画。

此处的示例：https://codepen.io/SHINZOC/pen/GRgXeey

当鼠标悬停时希望粉红色的矩形消失，同时使每个正方形以不同的角度旋转。我可以使一个正方形旋转，但其他正方形由于某种原因不会旋转。任何帮助将不胜感激！

.pink_rectangle { transition: .3s;}
.pink_rectangle:hover {opacity: 0;}
#pink_rectangle:hover + #blue_square {
transform: rotate(45deg);
transform-origin: center center;
transform-box:fill-box;
 }
#pink_rectangle:hover + #yellow_square {
transform: rotate(35deg);
transform-origin: center center;
transform-box:fill-box;
 }

#pink_rectangle:hover + #orange_square {
transform: rotate(15deg);
transform-origin: center center;
transform-box:fill-box;
 }

Answer 1

尚无法使用普通的CSS来完成您要执行的操作，您需要在JavaScript中使用addEventListener("mouseover", function());才能使其正常工作。

这行不通，因为CSS不会影响其中未包含的其他CSS类。

如果您不知道如何使用addEventListener，请阅读this。