javascript - 如何在元素悬停时将样式应用于多个类？

Question

每当我将鼠标悬停在 #Rock div 上时，我希望它同时对 .RockToScissors 和 .RockToLizard 应用样式。我拥有的那一刻:

<div onmouseover="overRock()" onmouseout="outRock()">
    <svg>
        <path stroke="#000" fill="#000"/>
    </svg>
</div>

然后在 Javascript 中我有:

function overRock() {
    var myPara = document.querySelector(".RockToScissors");
    myPara.style.stroke = "#008000";
    myPara.style.fill = "#008000";
}

function outRock() {
    var myPara = document.querySelector(".RockToScissors");
    myPara.style.stroke = "#000";
    myPara.style.fill = "#000";
}

但这只允许我将样式应用于一个类。如何在悬停 #Rock div 时使其同时应用于 .RockToScissors 和 .RockToLizard？

我尝试过 var myPara = document.querySelectorAll(".RockToScissors, .RockToLizard"); 但该样式不适用于任何一个。

Answer 1

将这两个类作为 querySelectorAll() 中选择器的一部分包含在内。然后循环遍历它们以单独设置样式:

尝试以下方法:

function overRock() {
  var myPara = document.querySelectorAll(".RockToScissors, .RockToLizard");
  myPara.forEach(function(el){
    el.style.stroke = "#008000";
    el.style.fill = "#008000";
  });
}

function outRock() {
  var myPara = .querySelectorAll(".RockToScissors, .RockToLizard");
  myPara.forEach(function(el){
    el.style.stroke = "#000";
    el.style.fill = "#000";
  });

}