在鼠标悬停时使用不同颜色的元素更改元素（同一类）的标题颜色答案

【问题标题】：Change heading color of elements (of the same class) with a different color for the element on mouse over在鼠标悬停时使用不同颜色的元素更改元素（同一类）的标题颜色
【发布时间】：2018-07-12 11:01:23
【问题描述】：

所以我有 3 个标题 elem1 elem2 elem3 ，当我越过 elem1 时，我希望 elem1 为黄色，elem2 和 elem3 为紫色。当我越过 elem2 时，我想要黄色的 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);*/

    }
}

【问题讨论】：

标签： javascript colors mouseover addeventlistener

【解决方案1】：

你可以用 CSS 做到这一点。

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

不要重复使用 ID！

【讨论】：

【解决方案2】：

可能只使用 css：

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

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

【讨论】：