Question

目前我正在鼠标左键显示弹出窗口并在鼠标离开时隐藏。我的代码在

之下

   $(document).on('mouseenter', '.chat-user', function () {
    var $popover = $('#custom-popover');
    $popover.show();
    });

    $(document).on('mouseleave', '.chat-user', function () {
    var $popover = $('#custom-popover');
                $popover.hide();
    });
    Popover code:

        <div class='popover left details-popover' style="display: none;border-radius: 0px !important;" id="custom-popover">

            <div class="popover-content" id="details-container">
            </div>
          </div>
        </div>

但是我需要在mouseleave上使用我的函数，如下所示

$(document).on('mouseleave', '.chat-user', function () {

// before I hide the popover I have to check the following things
1) after mouse leave I have to keep the popover alive for 50 miliseconds 
2) after 50 miliseconds I will hide the popover if 
3) user is not hovering over the popover

    var $popover = $('#custom-popover');
                $popover.hide();
    });

Answer 1

您可以在mouseleave事件中添加超时，并在用户再次输入mouseenter事件时清除超时。

var timer = null;

$(document).on('mouseenter', '.chat-user', function () {
    var $popover = $('#custom-popover');
    $popover.show();

    if (timer != null) {
        clearTimeout(timer);
        timer = null;
    }
});

$(document).on('mouseleave', '.chat-user', function () {
    timer = setTimeout(function() {
        var $popover = $('#custom-popover');
        $popover.hide();
    }, 50);
});

Answer 2

您可以尝试.delay()。

$("#custom-popover").delay(500).fadeOut();

http://api.jquery.com/delay/

如何检查用户是否悬停在div上并保持一段时间的popover

2 个答案: