JSFiddle - React, Tailwind, and code Playground

by willystyle

HTML

<div class="colg"><img><h3>some text</h3></div>

<div class="colg"><img><h3>some text</h3></div>

<div class="colg"><img><h3>some text</h3></div>

CSS

body {
  background-color: grey;
}

div.colg {
  width: 300px;  
  margin: 5px;
  padding: 10px;
  text-align: center;
  background-color: LightGrey;
}

div.colg:hover {
  background-color: grey;
}

JavaScript

let divs = document.querySelectorAll('div.colg');
let body = document.querySelector('body');

Array.from(divs).forEach(div => {
	div.addEventListener('mouseenter', function() {
  	body.style.backgroundColor = 'LightGrey';
  });
});

Array.from(divs).forEach(div => {
	div.addEventListener('mouseleave', function() {
  	body.style.backgroundColor = 'grey';
  });
});