以不同角度旋转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。

以不同角度旋转svg中的元素

Rotating elements in an svg at different angles

svg

rotation