Javascript kullanarak rollover'daki div içindeki bir öğenin rengini nasıl değiştirebilirim?

Question

İçinde div bulunan bir div var.

<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> 
... 

".child" öğesinin rengini javascript kullanarak vurgulu olarak değiştirmek istiyorum. Javascript kullanmak zorundayım ve jquery değil css.

Herhangi bir fikrin var mı?

Answer 1

Tüm çocuklara etkinlik için mouseover dinlemeniz gereken bir eventListener eklemeniz gerekir.

fare ayrıldığında yeni EventListener ile mouseout olayını kullandığınızda çocukların beyaz geri dönmek istiyorsanız

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>

.

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