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

新手上路,请多包涵

如何显示一组隐藏的 div 的鼠标悬停?

例如 :

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

所有 div 都需要显示 onmouseover 事件。

原文由 Jack P. 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 1.5k
2 个回答

如果 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';"

原文由 Daniel Vassallo 发布,翻译遵循 CC BY-SA 4.0 许可协议

有一种非常简单的方法可以仅以 CSS 方式执行此操作。

将不透明度应用于 0,因此使其不可见,但它仍会对 JavaScript 事件和 CSS 选择器做出反应。在悬停选择器中,通过更改不透明度值使其可见。

 #mouse_over {
  opacity: 0;
}

#mouse_over:hover {
  opacity: 1;
}
 <div style='border: 5px solid black; width: 120px; font-family: sans-serif'>
<div style='height: 20px; width: 120px; background-color: cyan;' id='mouse_over'>Now you see me</div>
</div>

原文由 user3434588 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏