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

Question

[Nikita-Fast]

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

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

https://jsfiddle.net/4eoybvnz/

ruSO как обычно язвит ...

Answer 1

[profesor08]

На 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";
});

Comments

[Nikita-Fast]

мне css не надо было ..спасибо за урок ...

[Александр Кот]

Nikita-Fast, это можно сделать на css, а код выше - мягко говоря, не очень. Отпишу завтра правильное решение.

[profesor08]

Александр Кот, мне уже интересно посмотреть, как ты выберешь предыдущий элемент на CSS.

Answer 2

[Александр Цымбал]

И всё-таки, не очень изящно писать столько кода на JS, когда всё можно сделать 3мя строками CSS.

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

Comments

[Nikita-Fast]

я на css умею ...надо было на js , именно такие теги стоят