Javascript - 修改 hover 上 class 的所有实例的 css

Question

I'm trying to add listeners to all instances of class to modify css of ALL those instance when a user hovers over any one of those instances so far. So I'm iterating over the 'slogan' node list adding the event listener to each of them but then the function to be executed also iterates over the node list to modify all of them but it works only for the first instance.

That's what I've got

const slogan = document.querySelectorAll(".slogan");

function sloganHoverOver(e) {
  slogan.forEach((s) => {
    s.styles.color = "red";
  });
}

slogan.forEach((s) => {
  s.addEventListener("mouseover", sloganHoverOver);
});

It changes the font color of only the one instance that is being hovered over. Also it throws the following error in the console:

TypeError: s.styles is undefined 

Answer 1

Use style not styles

s.style.color = "red";

Or just use css :hover