JSFiddle - React, Tailwind, and code Playground

by Town

HTML

<div id="container">
    <div id="typo">
        <div id="typo1" class="typo">Typo1</div>
        <div id="typo2" class="typo">Typo2</div>
        <div id="typo3" class="typo">Typo3</div>
    </div>
    <div class="clear"></div>
    <div id="cat">
        <div id="cat1">CAT1</div>
        <div id="cat2">CAT2</div>
        <div id="cat3">CAT3</div>
    </div>
</div>

JavaScript

$("#cat1, #cat2, #cat3").hide();

$('.typo').hoverout(function() {
    $('#cat').hide();
});

$("#typo1, #typo2, #typo3").hover(function(){
var catId = $(this).attr('id');
catId = catId.substring(4,5);
$("#cat"+catId).show("fast")
},
function(){
var catId = $(this).attr('id');
catId = catId.substring(4,5);
$("#cat"+catId).hide("fast")
});