JSFiddle - React, Tailwind, and code Playground

HTML

<div class="DivThatsTriggeredOnRollover" style="width:500px;height:300px;border:1px solid green;">

<div id="showingtext" style="float:left;width:100px;height:100px;border:1px solid red;">
here is showing text
</div>

<div class="hiddentext" style="float:right;width:100px;height:100px;border:1px solid red;">
here is hidden text
</div>

</div>

CSS

.hiddentext {
display: none;
}

.hiddentextShow {
display: block;
}

JavaScript

$(function() {
$("div.DivThatsTriggeredOnRollover").hover( 
function() {  $("div.hiddentext").addClass("hiddentextShow"); },
function() { $("div.hiddentext").removeClass("hiddentextShow"); });
});