javascript - 如何使用 Javascript 更改鼠标悬停时 div 内元素的颜色？

Question

我有一个 div，里面有一个 div。

<div class="parent">
  <div class="child">
    Content
  </div>
</div>
<div class="parent">
  <div class="child">
    Content
  </div>
</div>
<div class="parent">
  <div class="child">
    Content
  </div>
</div>
...

我想使用 JavaScript 更改悬停时“.child”元素的颜色。我必须使用 javascript，而不是 jquery，而不是 css。

有什么想法吗？

Answer 1

您需要向所有子级添加一个事件监听器，监听鼠标悬停事件。

var children = document.getElementsByClassName("child");
for(var i=0; i<children.length; i++) {
  children[i].addEventListener("mouseover",function() {
    this.style.background = "grey"; 
  })
}

<div class="parent">
  <div class="child">
    Content
  </div>
</div>
<div class="parent">
  <div class="child">
    Content
  </div>
</div>
<div class="parent">
  <div class="child">
    Content
  </div>
</div>

如果您希望子级在鼠标离开时变回白色，请使用带有新事件监听器的 mouseout 事件。

children[i].addEventListener("mouseout",function() {
   this.style.background = "white"; 
})