JSFiddle - React, Tailwind, and code Playground

by Patrick Hund

HTML

<div alt="REF-C000000" class="ShowCat">C000000</div>
<span id="REF-C000000" class="hide">C1 C2 C3</span>
<br>
<div alt="REF-C000001" class="ShowCat">C000001</div>
<span id="REF-C000001" class="hide">C4 C5 C6</span>

CSS

.hide {
    background-color: red;
    display: none;
}

JavaScript

$(document).ready(function() {
    var timeout;
    var altDiv;
    $('.ShowCat').on("mouseover", function(e) {
        altDiv = $(this).attr('alt');
        console.log(altDiv);
        $('#' + altDiv).show();
    });
    $('.ShowCat').on("mouseout", function() {
        altDiv = $(this).attr('alt');
        timeout = setTimeout(function() {
            $('#' + altDiv).hide();
        }, 5000);
    });
});