JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <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>
</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

$('#wrapper').on('mouseenter', '.touch', function() {
    $(this).next('.show').fadeIn(800);
}).on('mouseleave', '.touch', function() {
    $(this).next('.show').delay(800).fadeOut(800);
});