javascript - 在鼠标悬停时显示一个 div 并拥有它直到我们单击

Question

我需要在鼠标悬停/悬停在按钮顶部时显示一个 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');
    }
);

http://jsfiddle.net/u2oj799u/6/

更新: jbyrne2007 发布的解决方案很有帮助，但这是一种解决方法。我需要像下面评论中提到的那样的东西，

当我悬停时我需要“theme-hover”出现在鼠标指针附近，当我退出圆圈按钮时，如果不进入“theme-hover”，“theme-hover”应该被隐藏，否则如果我输入“theme-hover”，它应该仍然可见......上面的解决方案就像一个变通......

Answer 1

我不太清楚你的最终结果应该是什么，但看看 this jsfiddle

$(".main-area").mouseleave(function () {
$('.theme-hover').hide('slow');
});

我已将 div .theme-hover 移动到 .main-area 中，因此当您移过去单击它时它不会消失。

.theme-hover 的样式我也加了这个

cursor:pointer;

让它对用户更友好。

同样，我假设您希望在您单击时显示带有“Hey”的 div，所以我也将单击放在那里。

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