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>

あなたは、マウスの葉は新しいのEventListenerとマウスアウトイベントを使用するときに子供たちが白に戻りたい場合。

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