Javascript 在鼠标上方显示div，直到单击为止

我需要在鼠标上方/悬停在按钮顶部显示一个div，并且显示的div应该能够单击并保持，即使我从按钮移动到显示的div中。但当我们搬出整个区域时，这应该被隐藏起来

我不知道如何做到这一点

var mouseX;    
var mouseY;
$(document).mousemove(function (e) {
    mouseX = e.pageX;
    mouseY = e.pageY;
});

$(".circle-button-small").hover(function () {
    mouseX = mouseX;
    mouseY = mouseY - 100;
    $('.theme-hover').css({
        'top': mouseY,
        'left': mouseX
    }).show('slow');
});

$(".circle-button-small").mouseout(function () {
    if ($(".theme-hover").mouseenter()) {
        $('.theme-hover').css({
            'top': mouseY,
            'left': mouseX
        }).show('slow');
    } else {
        $('.theme-hover').hide('slow');
    }
}); 

更新

$(".circle-button-small").hover(
    function () {
        mouseX = mouseX;
        mouseY = mouseY - 100;
        $('.theme-hover').css({
            'top': mouseY,
            'left': mouseX
        }).show('slow');
    }, 
    function () {
        $('.theme-hover').hide('slow');
    }
);

更新： jbyrne2007发布的解决方案很有帮助，但这是一种变通方法。我需要一些类似下面评论中提到的东西

---

当我悬停时，我需要“主题悬停”出现在鼠标指针附近，当我退出圆圈按钮时，如果没有进入“主题悬停”，“主题悬停”应该隐藏，否则如果我进入“主题悬停”，它应该仍然可见。。。上面的解决方案就像是一个解决办法。

我有点不清楚你的最终结果应该是什么，但请看一看

我已将div.theme悬停在.main区域内，因此当您移动到单击时，它不会消失

我还将此添加到.theme hover的样式中

cursor:pointer;

使它更加用户友好

我再次假设您希望在单击时显示带有“Hey”的div，因此我也将单击放在了那里

 $(".theme-hover").click(function () {
        $('.overlay').toggle();
    });

---

jQuery悬停函数有两个参数：输入和输出函数：我对jQuery很陌生。。。。我使用圆形按钮，因此每当我将其悬停在某种节拍上时，大多数时候都会在显示和隐藏之间移动。请做一个按钮。不需要同时提供输入和输出功能。他会摆弄小提琴sooner@jbyme2007 ... 谢谢。。那正是我想要的。。非常感谢：）当我悬停时，我需要“主题悬停”出现在鼠标指针附近，并且当我退出圆圈按钮时，如果没有进入“主题悬停”，则“主题悬停”应该隐藏，否则如果我进入“主题悬停”，它应该仍然可见。。。上述解决方案就像是一种变通办法。。我们能实现我在这篇文章中所描述的吗？你能在上面提供帮助吗@jbyrne2007

 $(".theme-hover").click(function () {
        $('.overlay').toggle();
    });