javascript - 如何在鼠标悬停时显示隐藏的 div？

Question

如何显示一组隐藏的div的onmouseover？

例如:

<div id="div1">Div 1 Content</div>
<div id="div2">Div 2 Content</div>
<div id="div3">Div 3 Content</div>

所有的 div 都需要在鼠标悬停事件上显示。

Answer 1

如果 div 被隐藏，它们永远不会触发 mouseover 事件。

您将不得不监听其他一些未隐藏元素的事件。

您可以考虑将隐藏的 div 包装到仍然可见的容器 div 中，然后对这些容器的 mouseover 事件进行操作。

<div style="width: 80px; height: 20px; background-color: red;" 
        onmouseover="document.getElementById('div1').style.display = 'block';">
   <div id="div1" style="display: none;">Text</div>
</div>

如果你想让 div 在鼠标离开容器 div 时消失，你也可以监听 mouseout 事件:

onmouseout="document.getElementById('div1').style.display = 'none';"