Question

所以我有3个标题elem1 elem2 elem3，当我经过elem1时，我想要黄色的elem1，紫色的elem2和elem3。当我经过elem2时，我想要elem2为黄色，而其他为紫色。当我放手时，我希望泰斯三人回来黑。

<!DOCTYPE html>
<html>
<head>
    <title>Hello World!</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body id="page">

        <ul class="ligne_menu">
            <li id="menu">
                <h1 class = "espace" id="space">    Space</h1>
            </li>

            <li id="menu">
                 <h1 class = "espace" id="classe">  Class</h1>
            </li>
            <li id="menu">
                <h1 class = "espace" id="Production">Production</h1>
            </li>

        </ul>



<script src="script.js"></script> 
</body>
</html>

JavaScript代码

changeCouleur();


function changeCouleur(){
    var elements = document.getElementsByClassName("espace");
    for(var i=0; i<elements.length; i++) {
   //elements[i].style.color = 'green';
   elements[i].addEventListener("mouseover", function() {
    for(var j=0; j<elements.length; j++){

        if(elements[j].type == 'mouseover'){
          elements[j].style.color == 'yellow';
        }
    }
    }, false);

   /*elem[i].addEventListener("mouseout", function() {
   document.body.style.backgroundColor = "white";
   intoDark();
}, false);*/

    }
}

Answer 1

您可以使用CSS做到这一点。

.ligne_menu:hover .espace { color: purple }
.ligne_menu:hover .espace:hover { color: yellow }

请勿重复使用ID！

Answer 2

仅使用CSS就有可能：

#space:hover {
  color: yellow;
  #classe #Production {
    color: purple;
  }
}

#classe:hover {
  color: yellow;
  #space #Production {
    color: purple;
  }
}

鼠标悬停时，使用相同的颜色更改元素（同一类）的标题颜色

2 个答案: