javascript - 如何使工具提示在 mouseenter 上保持可见？

Question

我有一些工具提示的玩具代码。它工作正常，只是当您将鼠标放入工具提示时，它会通过此逻辑隐藏。

我正在绞尽脑汁，试图找出一种干净的方法，让工具提示在您将鼠标移入其中时保持可见，并在您将鼠标移出这两个区域时消失。有人有建议吗？

See the example.

HTML

<div id="container">
    <div id="div1"></div>
    <div id="div2"></div>
</div>

Javascript

var div1 = $("#div1");
var div2 = $("#div2").hide();

var hoverTimer;
div1.mouseenter(function(e) {
    var x = e.pageX;
    var y = e.pageY;
    div1.mousemove(function(e) {
        x = e.pageX;
        y = e.pageY;
    });
    hoverTimer = window.setTimeout(function() {
        div2.css("left", x);
        div2.css("top", y);
        div2.show();
    }, 400);
});

div1.mouseleave(function(e) {
    window.clearTimeout(hoverTimer);
    div2.hide();
});

CSS

#container {
    position: relative;
}
#div1 {
    float: left;
    clear: none;
    width: 200px;
    height: 200px;
    background-color: green;
}
#div2 {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: blue;
}

Answer 1

您创建了 mousemove 事件，但除了设置两个变量之外，您从未真正移动工具提示。试试this反而。请注意，我在鼠标位置添加了 16 像素的“边距” - 这是为了使其与实际工具提示更加一致，并防止闪烁效果。