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";
}

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

我已经尝试过var myPara = document.querySelectorAll(".RockToScissors, .RockToLizard");，但这种风格并不适用于任何一个。

标签： javascriptcss

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

}