JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<div id="wrapper">
    
    I want this to change color when button hovered
    
    <div class="button">Close</div>
    
</div>
<div id="wrapper2">
    
    I want this to change color when button hovered
    
    <div class="button">Close</div>
    
</div>
<div id="wrapper3">
    
    I want this to change color when button hovered
    
    <div class="button">Close</div>
    
</div>

CSS

div[id^=wrapper] {
    margin: 0 0 1em 0;
    border-bottom: 2px solid #ccc;
    padding: 0 0 1em 0;
}

JavaScript

var b = document.getElementsByClassName('button');

for (i = 0; i < b.length; i++) {

    b[i].onmouseover = function() {
        this.parentNode.style.backgroundColor = '#f90';
    };
    b[i].onmouseout = function() {
        this.parentNode.style.backgroundColor = '#fff';
    };
}