JSFiddle - React, Tailwind, and code Playground

by sachinnambiar

HTML

<div id="motherbox">
    <div class="middlebox">
        <div class="childbox">One</div>
        <div class="childbox">Two</div>
        <div class="childbox">Three</div>
    </div>
</div>

<div id="motherbox">
    <div class="middlebox">
        <div class="childbox">One</div>
        <div class="childbox">Two</div>
        <div class="childbox">Three</div>
        <div class="childbox">Four</div>
        <div class="childbox">Five</div>
    </div>
</div>

CSS

#motherbox {
    width:30%;
    height:100px;
    margin:100px auto;
    background-color:gray;
}

JavaScript

var elements = document.getElementsByClassName('childbox');
for(var i=0; i<elements.length; i++) { 
  elements[i].onmouseleave = function(){
    this.style.backgroundColor = "blue";
};
}