JSFiddle - React, Tailwind, and code Playground

by Andrew Dunai

HTML

<div class="hover-me">
    Hover me
    <div class="subitem">
        Subitem
    </div>
</div>

CSS

.hover-me {
    display: inline-block;
}

div {
    border: 1px dashed rgba(0, 0, 0, 0.2);
    padding: 1rem;
}

.subitem {
    opacity: 0;
    transition: opacity 0s linear;
    transition-delay: 0.2s;
    pointer-events: none;
}

.hover-me:hover .subitem {
    opacity: 1;
    transition-delay: 0s;
    pointer-events: all;
}