如何显示一组隐藏的 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 许可协议
如何显示一组隐藏的 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 许可协议
有一种非常简单的方法可以仅以 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 许可协议
8 回答6k 阅读✓ 已解决
9 回答9.4k 阅读
6 回答5k 阅读✓ 已解决
5 回答3.6k 阅读✓ 已解决
5 回答8k 阅读✓ 已解决
4 回答8k 阅读✓ 已解决
7 回答10k 阅读
如果 div 被隐藏,它们将永远不会触发
mouseover
事件。您将不得不收听其他一些未隐藏元素的事件。
您可以考虑将隐藏的 div 包装到保持可见的容器 div 中,然后对这些容器的
mouseover
事件采取行动。如果您希望 div 在鼠标离开容器 div 时消失,您也可以监听
mouseout
事件: