Question

每当我将鼠标悬停在#Rock div上方时，我都希望它同时将样式应用于.RockToScissors和.RockToLizard。我的片刻：

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

然后用Java语言编写：

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");，但是样式也不适用。

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

}

Answer 2

您只需执行document.querySelectorAll(".RockToScissors, .RockToLizard");即可同时定位这两个元素。

document.querySelectorAll()支持所有CSS选择器，而,是also valid。

Answer 3

您也可以使用CSS-

如果.RockToScissors和.RockToLizard直接位于容器内部：

#Rock div:hover > .RockToScissors, #Rock div:hover > .RockToLizard { //css to modify }

如果.RockToScissors和.RockToLizard在容器旁边（在容器关闭标签之后）：

#Rock div:hover + .RockToScissors, #Rock div:hover + .RockToLizard { //css to modify }

如果.RockToScissors和.RockToLizard位于容器内部：

#Rock div:hover .RockToScissors, #Rock div:hover .RockToLizard { //css to modify }

如果.RockToScissors和.RockToLizard是容器的同级兄弟：

#Rock div:hover ~ .RockToScissors, #Rock div:hover ~ .RockToLizard { //css to modify }

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

3 个答案: