Nikita-Fast
@Nikita-Fast
SVGшник и леплю что попало

Как сделать кроссбраузерно эффект при наведении?

Имеем (мною) нарисованную в Inkscape иконку с описанием функции.

Как сделать что бы при наведении на саму шестерёнку менялся fill у текста и так же при наведении на текст менялся fill у шестерёнки ?

https://jsfiddle.net/4eoybvnz/

ruSO как обычно язвит ...
  • Вопрос задан
  • 129 просмотров
Решения вопроса 1
profesor08
@profesor08 Куратор тега JavaScript
На CSS никак, на js легко:

let icon = document.querySelector(".some-icon");
let text = icon.querySelector("text tspan");
let path = icon.querySelector("path");

text.addEventListener("mouseenter", function() {
  path.style.fill = "red";
});

text.addEventListener("mouseleave", function() {
  path.style.fill = "#626262";
});

path.addEventListener("mouseenter", function() {
  text.style.fill = "green";
});

path.addEventListener("mouseleave", function() {
  text.style.fill = "#626262";
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
AlexanderTsymbal
@AlexanderTsymbal
tsymbal.su
И всё-таки, не очень изящно писать столько кода на JS, когда всё можно сделать 3мя строками CSS.

Единственная поправка: я инлайновые стили из svg удалил, перенес их в css. Дурной тон - использовать инлайновые стили svg, который является частью интерактивного веб-интерфейса. Делайте как хотите.

Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы