JSFiddle - React, Tailwind, and code Playground

HTML

<div class="w3-display-container mySlides">
  <img src="yellow.png" style="width:100%">
  <div class="w3-display-middle w3-large w3-container w3-padding-16 w3-black hover"> 
      HOVER TO MAKE ME TEAL
  </div>
</div>

<div class="w3-display-container mySlides">
  <img src="yellow.png" style="width:100%">
  <div class="w3-display-middle w3-large w3-container w3-padding-16 w3-black hover">
      HOVER TO MAKE ME TEAL
  </div>
</div>

<div class="w3-display-container mySlides">
  <img src="yellow.png" style="width:100%">
  <div class="w3-display-middle w3-large w3-container w3-padding-16 w3-black hover">
      HOVER TO MAKE ME TEAL
  </div>
</div>

CSS

.w3-teal {
  background: black;
}

.w3-teal {
  background: teal;
}

JavaScript

var hover = document.querySelectorAll('.hover');

hover.forEach(e => e.addEventListener("mouseover", () => mouseOver(e)));
hover.forEach(e => e.addEventListener("mouseout", () => mouseOut(e)));

function mouseOver(e) {
e.classList.remove("w3-black");
e.classList.add("w3-teal");
}

function mouseOut(e) {
e.classList.remove("w3-teal");
e.classList.add("w3-black");
}