javascript mousemove隐藏div-无活动-并在移动鼠标时再次显示div-活动

我有两个div的一个容器和该容器中的DIV2，当我在3秒钟内不移动鼠标时，我在容器上方，我想隐藏DIV2，当我移动鼠标时，我想再次显示DIV2

<div id=container>
  <div id="2">stuff to show</div>
</div>

---

实际上一切都正常，但是当鼠标已经在容器上并且我移动鼠标时，DIV2不会再次显示。我需要离开集装箱区，再次进入。如何添加一个额外的mousemove，在移动鼠标时再次显示容器，在不移动鼠标时再次隐藏容器，而不离开容器区域。

您只需要

onmouseover

和

onmouseout

即可：

var超时；
var container=document.getElementById（“容器”）；
container.onmouseover=函数（）{
超时=设置超时（函数（）{
document.getElementById（“2”）.style.display='none'；
}, 3000);
};
container.onmouseout=函数（）{
document.getElementById（“2”）.style.display='flex'；
};

展示的东西
此解决方案缺少什么？我无法理解这将如何工作，首先鼠标没有离开容器，其次当我进入容器时，div不可见，默认为隐藏。接下来，在我看来，当我进入容器时，它会在3秒钟后隐藏鼠标。
var timeout;

var container = document.getElementById("container");

container.onmousemove = function () {
    clearTimeout(timeout);
    timeout = setTimeout(function () {
        document.getElementById("2").style.display = 'none';
    }, 3000);
}

container.onmouseover = function () {
    document.getElementById("2").style.display = 'flex';
};

container.onmouseout = function () {
    document.getElementById("2").style.display = 'none';
};