JSFiddle - React, Tailwind, and code Playground

by Chamster

HTML

<div class="dragon uno"></div>
<div class="dragon duo"></div>

<div id="indicator"><hr>Enter the dragon!</div>

CSS

div {
  width: 200px;
  height: 200px;
  text-align: center;
}

.uno {
  background-color: blue;
}

.duo {
  background-color: yellow;
}

#indicator {
  color: red;
  font-family: Tahoma;
  font-size: 32px;
}

JavaScript

$(".dragon")
  .on("mouseenter", function(target) {
    $("#indicator").fadeOut();
  })
  .on("mouseleave", function(target) {
    $("#indicator").fadeIn();
  });