JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
<div class="someclass">
    <a href="#">Hover Me</a>
   
</div>
 <p>Only Once!</p>
</div>

CSS

div {width:300px;height:100px;background:#CCC;}
a {margin:30px;width:100px;height:50px;background:#DDD;display:block;}
p {position:absolute;margin:-60px 30px 30px 30px;width:100px;height:30px;background:#FFF;display:none;}

JavaScript

var handleHover = function(evt) {
    switch (evt.type) {
        case 'mouseenter':
            $("p").fadeIn();
            break;
        case 'mouseleave':
            $("p").fadeOut();
            break;
    }
}
$(".wrapper").bind('mouseenter mouseleave', handleHover);