如何更改使用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

您需要添加一個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>

如果您希望孩子回到白當鼠標離開使用mo​​useout事件有新的事件監聽。

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