:root {
	--background: #222;
}

html {
	box-sizing: border-box;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

body {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: grid;
	grid-template: repeat(20, 1fr) / repeat(20, 1fr);
	gap: 0.2rem;
	background: var(--background);
}

div {
	width: 5vw;
	height: 5vh;
	background: var(--background);
	border-radius: 0.5rem;
	transition: background 2s ease-in;

	&:hover {
		transition: none;
	}
}
View Compiled
$(document).ready(function () {
	for (let i = 0; i <= 400; i++) {
		let div = document.createElement("div");
		document.body.appendChild(div);
	}

	const background = getComputedStyle(document.documentElement).getPropertyValue(
		"--background"
	);

	$("div").on("mouseover", function () {
		var color =
			"hsl(" +
			360 * Math.random() +
			"," +
			(25 + 70 * Math.random()) +
			"%," +
			(85 + 10 * Math.random()) +
			"%)";
		$(this).css("background", color);
	});

	$("div").on("mouseleave", function () {
		$(this).css("background", background);
	});
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js