JSFiddle - React, Tailwind, and code Playground
HTML
<div id="parent_one">
<div class="touch" id="one">Touch me!</div>
<div class="show">'sup dude.</div>
</div>
<div id="parent_two">
<div class="touch" id="two">Touch me!</div>
<div class="show">'sup wich u?</div>
</div>
CSS
#parent_one, #parent_two {
border: 2px solid black;
}
#one {
width: 200px;
height: 200px;
background: red;
}
#two{
width: 200px;
height: 200px;
background: blue;
}
.show {
display: none;
background: yellow;
}
JavaScript
$('.touch').hover(
function(){
$(this).next('.show').fadeIn(800);
},
function(){
$(this).next('.show').delay(800).fadeOut(800);
}
);