JSFiddle - React, Tailwind, and code Playground

by Felis Catus

HTML

<div class="rtt">
</div>
<div class="indicator">
</div>

CSS

.rtt {
    visibility: visible;
    transition: visibility 1ms step;
    transition-delay:200ms;
    width: 50px;
    height: 50px;
    border: 1px dotted silver;
}
.rtt:hover {
    visibility: hidden;
}
.indicator {
    position: absolute;
    top: 0px;
    left: 0px;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    background:red;
    transition: left 200ms ease-in, top 200ms ease-out;
}
.rtt:hover~.indicator {
    left: 50px;
    top: 50px;
}