JSFiddle - React, Tailwind, and code Playground

by Vanss472

HTML

<div id="div1" class="block">
    <span id="arrowPreview">Arrow</span>
</div>

CSS

div{
    border: 1px solid black;
    height: 50px;
    width: 150px;
}

span#arrowPreview { display: none; }

JavaScript

$('.block').on("mouseenter", function() {
    var id = $(this).attr('id');
    $('#arrowPreview').show();
    
}).on("mouseleave", function() {
    var id = $(this).attr('id');
    $('#arrowPreview').hide();

}).on("click", function() {
    //var id = $(this).attr('id');
    //$('#arrowPreview' + id).show();
    $('.block').off('mouseleave');
});