Вращающиеся элементы в SVG под разными углами - PullRequest
Новая
       6

Вращающиеся элементы в SVG под разными углами

0 голосов
/ 17 января 2020

Я пытаюсь создать 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;
 }

1 Ответ

1 голос
/ 17 января 2020

Пока невозможно выполнить то, что вы просите, с простым css, вам нужно использовать addEventListener("mouseover", function()); в javascript, чтобы заставить его работать.

Это не работает, потому что CSS не может влиять на другие css классы, которые не содержатся в нем.

Если вы не знаете, как использовать addEventListener, прочитайте немного this .

...