How to make hover effect cross browser?

Question

JavaScript

We have (by me) an icon with a description of the function drawn in Inkscape.

How to make the fill of the text change when hovering over the gear itself, and also when hovering over the text, the fill of the gear changes?

https://jsfiddle.net/4eoybvnz/

ruSO sarcastic as usual...

Answer 1

No way with CSS, easy with 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";
});

Answer 2

Still, it's not very elegant to write so much JS code when everything can be done with 3 lines of CSS.
The only amendment: I removed the inline styles from svg, transferred them to css. It's bad form to use inline styles for the svg that is part of the interactive web interface. Do as you wish.