當我用鼠標離開元素但用鼠標進入彈出框時，如何隱藏彈出框？

Question

這是彈出窗口的HTML，用於當有人將鼠標懸停在個人資料縮略圖上方時顯示用戶個人資料的摘要。

                      <div class="user-avatar" style="background-image: url({{          $chat->from->small_avatar }}); " data-container="body" data-toggle="popover" data-placement="right" data-html="true" data-content="<div class='group-chat-popover'>
                      <div class='popover-header'>
                        <div class='chat-avatar' style='background-image:url({{ $chat->from->small_avatar }})'></div>
                        <div class='header-description'>
                          <p class='user-name'>{{ $chat->from->full_name }}</p>
                          <p class='user-bio'>{{ $chat->from->about }}</p>
                        </div>
                      </div>
                      <div class='user-activity'>
                        <div class='activity'>
                          <p class='activity-category'>Reputation</p>
                            <p class='activity-count'>{{ $chat->from->total_points }}</p></div>
                        <div class='activity'>
                          <p class='activity-category'>Submissions</p>
                            <p class='activity-count'>{{ $chat->from->approved_tutorials->count() }}</p></div>
                        <div class='activity'>
                          <p class='activity-category'>Upvotes</p>
                            <p class='activity-count'>{{ $chat->from->votes->count() }}</p></div>
                      </div>
                      <div class='popover-footer'>
                        <a href='{{ $chat->from->profile_link }}' class='btn btn-sm btn-select'>Open profile</a>
                        <a href='{{ $chat->from->chat_link }}' class='btn btn-sm btn-primary'>Private Chat</a>
                        </div>
                    </div>">
                    </div>

這是我編寫的觸發和關閉彈出窗口的代碼。 我也在這里使用引導程序彈出窗口。

            var timer;
            $(".user-avatar").popover({
                trigger: "manual",
                animation: false
            })
                .on("mouseenter", function(){
                var self = $(this);
                timer = setTimeout(function(){
                    self.popover("show");
                }, 1000);
            })
                .on("mouseleave", function () {
                clearTimeout(timer);

                $(".popover").on("mouseleave", function () {
                    $(this).popover('hide');
            });
                setTimeout(function () {
                    if (!$(".popover:hover").length) {
                        $(this).popover("hide");
                    }
                }, 30);
            });

問題是，當我用鼠標輸入縮略圖時，我無法隱藏彈出窗口，而直接用鼠標留下縮略圖（沒有鼠標留下彈出窗口）。

我想要以下行為：

當我用鼠標輸入縮略圖時會顯示彈出窗口。 當我用鼠標點擊彈出窗口時，彈出窗口保持打開狀態。 當我用鼠標離開彈出窗口時，彈出窗口會隱藏。 當我用鼠標離開縮略圖時，彈出窗口會隱藏（不顯示彈出窗口）。

我無法達到最后一點！

Answer 1

您可能應該在鼠標離開元素時設置一個計時器，並在鼠標進入彈出框時清除它。 像這樣：

        var timer;
        $(".user-avatar").popover({
            trigger: "manual",
            animation: false
        }).on("mouseenter", function(){
            $(this).popover("show");
        }).on("mouseleave", function () {
            var self = $(this);
            timer = setTimeout(function(){ // You may want to keep a reference to the time of each element.
                self.popover("hide");
            }, 1000);
        });

        $(".popover").on("mouseenter", function(){
            clearTimer(timer);
        }).on("mouseleave", function () {
            $(this).popover("hide"); // I'm not sure this will work, you may have to keep a reference to the element that owns this popover.
        });