javascript - div 跟随光标的困难

Question

我试图在用户将鼠标悬停在图像上时显示工具提示，我还使工具提示跟随鼠标，并且每当用户离开图像所在的区域时工具提示就会消失。这一切都很好，但是当我将光标移动到右侧并且工具提示跟随它时，它会开始闪烁。我知道造成这种情况的原因是光标离开图像区域并进入工具提示区域一段时间。不知道如何解决这个问题。看看我的代码:

HTML:

<img id="mainImage" src="https://i1.wp.com/historiek.net/wp-content/uploads-phistor1/2015/09/Het-nieuw-logo-van-Google-e1441130561430.jpg?fit=663%2C282&ssl=1">
   <div id="toolTip">This is the logo of google</div>

JS:

    $('#mainImage').hover (
        $('#mainImage').on('mousemove', function(e) {
           $('#toolTip').css({
               'left' : e.pageX,
               'top' : e.pageY,
               'display' : 'block'
           });
        }),
        $('#mainImage').on('mouseout', function() {
            $('#toolTip').css('display', 'none');
        })
    );

提前致谢。

Answer 1

在此页面的 CSS 中，设置 pointer-events: none在你的工具提示上:

#toolTip {
  pointer-events: none;
}

这将导致单击和悬停事件被忽略，因此工具提示将不再从其下方的元素窃取悬停事件。