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

debugcn 发表于 Dev

SinéadCahill

我正在尝试创建一个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;
 }

德夫·科索夫

尚不可能使用纯CSS来完成您要使用的功能addEventListener("mouseover", function());，而您需要在javascript中使用它才能使其正常工作。

它不起作用，因为CSS不会影响其中未包含的其他CSS类。

如果您不知道如何使用，请addEventListener阅读此内容。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。