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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

例如 ：

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

所有div需要在onmouseover事件中显示。

回答：

如果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>

mouseout如果希望当鼠标离开容器div时div消失，也可以监听事件：

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

以上是 如何在鼠标悬停时显示隐藏的div？ 的全部内容， 来源链接： utcz.com/qa/435205.html

回到顶部