JSFiddle - React, Tailwind, and code Playground

by Josh Krauth-Harding

HTML

<div class="foo"></div>
<div class="foo"></div>
<div class="bar"></div>
<div class="bar"></div>

CSS

div {
  height: 100px;
  width: 100px;
}

.foo {
  background-color: blue;
}

.bar {
  background-color: red;
}

.baz {
  background-color: green;
}

JavaScript

function addClass() {
console.log('hey')
	document.querySelectorAll('.bar').forEach(elm => elm.classList.toggle("baz"))
}

function removeClass() {
	document.querySelectorAll('.bar.anotherclass').forEach(elm => elm.classList.toggle("baz"))
}

document.querySelectorAll('.foo').forEach(elm=> {
	elm.onmouseenter = addClass
	elm.onmouseleave = removeClass
})