JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">hold mouse down here and slide to popup
</div>
<div id="popup">
    <div id="text">popup test to hover</div>
</div>


<div id="result"></div>

CSS

#content {
    width: 400px;
    height: 400px;
    background-color: lime;
}

#popup {
    width: 200px;
    height: 100px;
    background-color: yellow;
    position: absolute;
    top: 40px;
    left: 10px;
    visibility: hidden;
}

#text {
    background-color: red;
}

JavaScript

var $content = $("#content"),
    $popup = $("#popup"),
    $result = $("#result"),
    $text = $("#text");
    

$content.mousedown(function () {
    $result.append("<br>mousedown content");
    $popup.css({"visibility":"visible"});
});

$content.mouseup(function () {
    $result.append("<br>mouseup content");
});

/*
$content.mousemove(function () {
    $result.append("<br>mousemove content");
});
*/



$popup.mousedown(function () {
    $result.append("<br>mousedown popup");
});

$popup.mouseup(function () {
    $result.append("<br>mouseup popup");
});


$popup.mouseenter(function () {
    $result.append("<br>mouseenter popup");
});

$popup.hover(function () {
    $result.append("<br>hover popup");
});

$text.hover(function () {
    $result.append("<br>text hover popup");
});

$text.mouseover(function () {
    $result.append("<br>text mouseover popup");
});