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发布的解决方案很有帮助，但这是一种解决方法。我需要像下面评论中提到的那样，

当我悬停时，我需要＆＃34;主题悬停＆＃34;出现在鼠标指针附近，当我退出圆形按钮时，如果没有出现在＆＃34;主题悬停＆＃34;，＆＃34;主题悬停＆＃34;应该隐藏，否则如果我进入＆＃34;主题悬停＆＃34;它应该仍然可见......上面的解决方案就像一个解决方案..

Answer 1

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

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

我已将div .theme-hover移动到.main-area内，所以当你移动点击它时就不会消失。

我还将其添加到.theme-hover

的样式中

cursor:pointer;

让它更友好。

我再次假设你想要和＃34嘿嘿＆＃34;当你点击时出现，所以我也点击了那里。

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

在鼠标悬停时显示一个div并让它直到我们点击

1 个答案: