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

您需要向所有子项添加eventListener，并监听事件 mouseover 。

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>

如果您希望孩子在鼠标离开时返回白色，请使用带有新eventListener的mouseout事件。

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

如何使用Javascript更改翻转中div内元素的颜色？

1 个答案: