将鼠标悬停在元素上的元素（相同 class）的标题颜色更改为不同的颜色

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

将鼠标悬停在元素上的元素（相同 class）的标题颜色更改为不同的颜色

Change heading color of elements (of the same class) with a different color for the element on mouse over

javascript

colors

mouseover

addeventlistener