Задать вопрос
Nikita-Fast
@Nikita-Fast
SVGшник и леплю что попало

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

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

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

https://jsfiddle.net/4eoybvnz/

ruSO как обычно язвит ...
  • Вопрос задан
  • 133 просмотра
Подписаться 1 Средний Комментировать
Решение пользователя profesor08 К ответам на вопрос (2)
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";
});
Ответ написан