Javascript 如何使用下面的HTML结构创建一个显示在hover上的覆盖？

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

当用户将鼠标悬停在特定的contentdiv上时，我希望相应的覆盖div显示在其顶部。因此，基本上，如果用户将鼠标悬停在对象1上，我只希望对象1的覆盖显示出来，然后一旦鼠标离开对象，我希望覆盖消失。现在，这是通过Javascript和

onmouseover

和

onmouseout

实现的。但是，正如您在下面的小提琴中看到的那样，

onmouseover

正在工作，但是

onmouseout

没有工作（我也尝试了

onmouseleave

但它也不工作）。那么，我做错了什么？另外，如果这不起作用，有人能建议更多的方法让悬停在不改变HTML结构的情况下工作吗（我仍然希望先使用overlay div，然后是content div，因为当我改变代码结构时，我的样式完全混乱了）

我设置了一个基本元素，基本上就是我的代码的外观，除了我使用for循环来呈现多个元素之外，还有实际的内容，而不仅仅是文本。但是，

onmouseout

在这里也不起作用

功能显示状态（对象）{
object.style.opacity=“1”；
}
函数规格化（对象）{
object.style.opacity=“0”；
}

#覆盖{
背景：rgba（255,255,255,0.75）；
位置：绝对位置；
不透明度：0；
宽度：100%；
}

覆盖层
实际内容

我不知道为什么，但当我更改了normalize函数的名称时，它开始工作了。像这样：

功能显示状态（对象）{
object.style.opacity=“1”；
}
函数输出（对象）{
object.style.opacity=“0”；
}

#覆盖{
背景：rgba（255,255,255,0.75）；
位置：绝对位置；
不透明度：0；
宽度：100%；
}

覆盖层
实际内容

我不知道为什么，但当我更改了normalize函数的名称时，它开始工作了。像这样：

功能显示状态（对象）{
object.style.opacity=“1”；
}
函数输出（对象）{
object.style.opacity=“0”；
}

#覆盖{
背景：rgba（255,255,255,0.75）；
位置：绝对位置；
不透明度：0；
宽度：100%；
}

覆盖层
实际内容

它的不透明度是最后渲染的。因此，它覆盖了所有破坏悬停功能和链接或按钮的内容。使用RGBa作为背景色，使其仅部分透明。您也可以使用：hover for CSS来执行此操作。@tacosh但是对于CSS，我无法指定要显示哪个特定的覆盖div，因为我有多个覆盖div和内容div？因为，我没有办法匹配的内容和重叠，相互对应，请结帐这篇文章。它实现了与CSS hover相同的功能：@wasserholz谢谢，将保留该功能以备将来参考，因为不透明度是最后渲染的。因此，它覆盖了所有破坏悬停功能和链接或按钮的内容。使用RGBa作为背景色，使其仅部分透明。您也可以使用：hover for CSS来执行此操作。@tacosh但是对于CSS，我无法指定要显示哪个特定的覆盖div，因为我有多个覆盖div和内容div？因为，我没有办法匹配的内容和重叠，相互对应，请结帐这篇文章。它实现了与CSS hover相同的功能：@wasserholz谢谢，将保留该功能以备将来参考