Javascript 当我用鼠标删除元素但将鼠标移到府绸上时，如何使府绸隐藏？

这是popover的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>

问题是，当我用鼠标点击缩略图时，我无法隐藏popover，而是直接用鼠标删除缩略图（而不用鼠标删除popover）

我想要以下行为：

鼠标输入缩略图时弹出显示。 当我用鼠标点击府绸时，府绸一直开着。 当我用鼠标移动Popover时，Popover会隐藏起来。 当我用鼠标删除缩略图时，Popover会隐藏（不去Popover）

---

我不能达到最后一点

您可能应该在鼠标离开元素时设置计时器，并在鼠标进入弹出框时清除计时器。 大概是这样的：

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

---

你为什么不使用本地语言？？当鼠标离开元素时，您可能应该设置一个计时器，当鼠标进入弹出框时清除它。

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