onmouseover 函数可以工作，但是 onmouseout 函数不行吗？

Question

现在我正在尝试在另一个元素悬停时显示覆盖 div，并且我正在使用 onmouseout 和 onmouseover 属性执行此操作。在最初显示的元素中，我有一个带有唯一项目代码的 h1 和该项目的图像。我还有另一个默认设置为 display: none 的 div，其 id 是与项目对应的代码。我希望这个 div 在悬停时显示，并在鼠标移开时消失。

在 HTML 代码中，我指定了在 mouseover 和 mouseout 上运行的函数，然后在这些函数的 Javascript 中，我首先获取 h1 及其唯一的项目代码，然后选择隐藏的 div，其 id 为要显示或隐藏的项目代码。我的显示和隐藏功能之间的唯一区别是style.display，因为它要么是“阻止”，要么是“无”。 show 功能完美运行，隐藏的 div 显示出来。但是，当我将鼠标移出时，div 并没有像预期的那样消失。谁能帮我弄清楚为什么？

function showstatus(object) {
  code = object.querySelector('h1').innerHTML;
  document.querySelector(`#${code}`).style.display = "block";
}

function normalize(object) {
  code = object.querySelector('h1').innerHTML;
  document.querySelector(`#${code}`).style.display = "none";
}

{% for listing, specs in a_dict %}
<div class="list-item" onmouseover="showstatus(this)" onmouseout="normalize(this)">
  <h1 class="hidden">{{listing}}</h1>
  <img src="image link that I didn't include" class="item-thumbnail">
</div>
{% endfor %}

Answer 1

在 div 上使用 onmouseleave 而不是 onmouseover。

function showstatus(object) {
    code = object.querySelector('h1').innerHTML
    document.querySelector(`#${code}`).style.display="block";
}

function normalize(object) {
    code = object.querySelector('h1').innerHTML
    document.querySelector(`#${code}`).style.display="none";
}

<div class="list-item" onmouseover="showstatus(this)" onmouseleave="normalize(this)">
       <h1 class="hidden">{{listing}}</h1>
       <img src="image link that I didn't include" class="item-thumbnail">
</div>

这是这样做的另一种方法：

document.getElementById('div').onmouseover = showstatus(document.getElementById('div'))
document.getElementById('div').onmouseout = normalize(document.getElementById('div'))

function showstatus(object) {
    code = object.querySelector('h1').innerHTML
    document.querySelector(`#${code}`).style.display="block";
}

function normalize(object) {
    code = object.querySelector('h1').innerHTML
    document.querySelector(`#${code}`).style.display="none";
}

<div id="div" class="list-item">
       <h1 class="hidden">{{listing}}</h1>
       <img src="image link that I didn't include" class="item-thumbnail">
</div>