onmouseout 不起作用，但是 onmouseover 是

Question

抱歉，如果您看到这篇文章两次，我觉得我可以更好地解释事情。

基本上，我正在创建一个包含一堆元素的页面，当鼠标悬停在它上面时，一个“状态”框会覆盖在它上面，当鼠标离开时，它会再次消失。通过 Django，我传入了一个 Python 字典，其中包含每个项目的标识符代码和规格，规格本身就是另一个字典，具有“图像 url”、“状态”等特定字段。

然后我为字典中的每个对象运行一个 for 循环，为每个对象呈现一个单独的 HTML 元素。当页面第一次加载时，会出现一堆图像，然后当用户将鼠标悬停在一个图像上时，相应的“状态”div——也是由 for 循环创建的——应该会显示出来。每个status div也有一个唯一的id，即对象的标识码（我传递的dict的key）。

我在图像上使用onmouseover 和onmouseout 来创建悬停时显示，它们中的每一个都转到一个单独的Javascript 函数，该函数显示或隐藏覆盖div。在隐藏的 h1 中，我存储了这个特定对象的标识符代码。 show 和 hide 的函数然后获取该 h1 的 innerHTML（即代码），找到具有该代码 id 的状态 div，并显示/隐藏该 div。

当鼠标移到图像上时，让 div 显示没有问题。但是，它的 onmouseout 部分似乎不起作用，因为当我的鼠标离开图像时，没有任何变化并且覆盖 div 仍然存在。我认为这是 onmouseout 的问题，而不是函数的问题，因为函数没有运行（我放置了一个 console.log 进行测试，控制台中没有显示任何内容）。

HTML 代码

{% for listing, specs in listings.items %}
      <div class="status" id="{{ listing }}">
      </div>
      <div class="list-item" onmouseover="showstatus(this)" onmouseout="normalize(this)">
           <h1 class="hidden">{{listing}}</h1>
           <img src="{{specs.pic}}" class="item-thumbnail">
      </div>
{% endfor %}

javascript

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

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

Answer 1

没有看到你的结果，我猜是因为覆盖覆盖了元素并阻止了 mouseleave 触发。

试试这个

{% for listing, specs in listings.items %}
<div class="status" id="{{ listing }}"  onmouseleave="normalize(this)">
</div>
<div class="list-item" onmouseenter="showstatus(this)">
       <h1 class="hidden">{{listing}}</h1>
       <img src="{{specs.pic}}" class="item-thumbnail">
</div>
{% endfor %}

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

function normalize(object) {
object.style.display="none";
}