js解决通过一个盒子的mouseenter打开另外一个隐藏盒子的问题

今天在玩的时候遇到了一个问题，首先想达到这样的效果

但最后却只能做出来这样的效果

很明显，当鼠标离开头像区域的时候，黑色框并不能收回去，只有鼠标离开黑色框的时候，才会触发黑色框的mouseenter事件，让黑色框消失，那么我们要想达到第一个那样的效果应该怎么办呢？

由于我比较菜，不知道高级的用法，比如事件的冒泡这些骚操作，事实上也不用这么麻烦，我想到了更好的解决方法了

方法的核心是设置一个全局定时器，当鼠标离开头像之后，开始计时，1000毫秒内，如果触发了黑色框的mouseenter事件，那么自动去清除定时器，否则，定时器如约执行，接下来，按照我的方法调整，完成了如下的效果：

 let timer = null;
        $('header img').onmouseleave = function() {
            timer = setTimeout(() => {
                fade_out($('.tips')) //消失
            }, 10);
        }
        $('.tips').onmouseenter = function() {
            if (timer)
                clearTimeout(timer)
        }
        $('.tips').onmouseleave = function() {
            fade_out(this)
        }

 如上，解决了这个问题，如果你遇到了和我一样的问题的话，欢迎参考