jQuery - Mouseleave after timeout，where is pointer

w80xi6nr 于 2023-08-04 发布在 jQuery

关注(0)|答案(1)|浏览(79)

我试图找出一种方法，知道鼠标指针在哪里（如在哪个元素）后，我做了一个鼠标离开和超时。
有什么简单的方法可以得到这个吗？
我已经做了一个jsfiddle，我的代码看起来像这样：https://jsfiddle.net/0Lwxhh8r/
超文本标记语言

<div class="showTooltip"></div>
<div class="showTooltip"></div>
<div class="showTooltip"></div>
<div class="showTooltip"></div>
<div id="tooltip"></div>

字符串
CSS格式

.showTooltip {
height: 70px;
width: 50px;
border: 1px solid #000;
display: inline-block;
margin: 0px 10px;
}
#tooltip {
position: fixed;
width: 400px;
height: 240px;
border: 1px solid #000;
display: none;
}

型
JS

$(document).on({
mouseenter: function (e) {
        $("#tooltip").show();
},
mouseleave: function (e) {
setTimeout(function() {
    alert("Where is mousepointer?");
    $("#tooltip").hide();
}, 500)
}
}, ".showTooltip");

型
所以我有点想知道，如果超时后，鼠标指针在另一个.showTooltip，#tooltip或其他地方。

jquery

来源：https://stackoverflow.com/questions/45344302/jquery-mouseleave-after-timeout-where-is-pointer

1条答案

按热度按时间

yks3o0rb1#

在@freedomn-m的“延迟隐藏”理论正确的基础上，你可以这样写：

var timeoutRef = null;

$(document).on({
    mouseenter: function(e) {
        clearTimeout(timeoutRef);
        $("#tooltip").show();
    },
    mouseleave: function (e) {
        timeoutRef = setTimeout(function() {
            $("#tooltip").hide();
        }, 500);
    }
}, ".showTooltip");

字符串
或者，可以通过将超时引用存储为#tooltip元素的data属性来避免丑陋的外部变量。

$(document).on({
    mouseenter: function(e) {
        clearTimeout($("#tooltip").show().data('timoutRef'));
    },
    mouseleave: function (e) {
        var $tooltip = $("#tooltip").data('timoutRef', setTimeout(function() {
            $tooltip.hide();
        }, 500));
    }
}, ".showTooltip");

型

赞(0）回复(0）举报 2023-08-04

我来回答

jQuery - Mouseleave after timeout，where is pointer

1条答案

相关问题

热门标签

最新问答