如何使用下面的 HTML 结构创建悬停时显示的叠加层？

Question

现在，我正在创建一个叠加层 div 和一个具有以下结构的内容 div，其中叠加层 div 位于内容 div 之上，并且绝对定位。我正在使用 Django 变量呈现叠加层的内容和内容 div，并且在我的实际代码中，这些是使用 for 循环创建的，以呈现页面上的所有内容。

当用户将鼠标悬停在特定内容 div 上时，我希望相应的叠加层 div 出现在其上方。所以基本上，如果用户将鼠标悬停在对象 1 上，我只希望对象 1 的覆盖层出现，然后一旦鼠标离开该对象，我希望覆盖层消失。现在，这是通过 Javascript 和 onmouseover 和 onmouseout 完成的。但是，正如您在下面的 fiddle 中看到的那样，onmouseover 有效但 onmouseout 无效（我也尝试过 onmouseleave 但它也无效）。那么，我在这里做错了什么？此外，如果这不起作用，有人可以建议我可以在不更改 HTML 结构的情况下让悬停工作的更多方法（我仍然希望首先覆盖 div，然后是内容div其次，因为当我更改代码结构时，我的样式完全乱了）？

我设置了一个基本元素，除了我使用 for 循环呈现多个元素外，它几乎就是我的代码的样子，并且有实际内容，而不仅仅是文本。但是，onmouseout 在这里也不起作用。

function showstatus(object) {
    object.style.opacity = "1";
}

function normalize(object) {
    object.style.opacity="0";
}

#overlay {
    background: rgba(255, 255, 255, 0.75);
    position: absolute;
    opacity: 0;
    width: 100%;
}

<div>
  <div id="overlay" onmouseover="showstatus(this)" onmouseout="normalize(this)">
    <h2>Overlay</h2>
  </div>
  <div style="background: blue;">
    <h1>Actual content</h1>
  </div>
</div>

这里还有一个fiddle

Answer 1

我不确定为什么，但是当我更改规范化函数的名称时它开始工作了。像这样：

function showstatus(object) {
    object.style.opacity = "1";
}

function out (object){
 object.style.opacity="0";
}

#overlay {
    background: rgba(255, 255, 255, 0.75);
    position: absolute;
    opacity: 0;
    width: 100%;
}

<div>
  <div id="overlay" onmouseout="out(this)" onmouseover="showstatus(this)" >
    <h2>Overlay</h2>
  </div>
  <div style="background: blue;">
    <h1>Actual content</h1>
  </div>
</div>

可能是因为这个： https://www.w3schools.com/jsref/met_node_normalize.asp

如何使用下面的 HTML 结构创建悬停时显示的叠加层？

How to create an overlay that appears on hover with the HTML structure below?

html

javascript

css

jquery

onmouseout