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;
}

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

div跟随光标出现困难

1 个答案: