javascript - 如何在鼠标悬停时覆盖 div/box?

标签 javascript css html overlay

我有一个链接,当用户将鼠标悬停在它上面时,它应该在链接下方显示一个框 (div)。该框应覆盖其下方的任何内容。我如何使用 css 或 javascript 来实现?

最佳答案

您有一个隐藏的绝对定位的 div 和链接的子项。然后,当您将鼠标悬停在链接上时,您应该取消隐藏 div。我无法提供完整的 CSS,而且我还没有对此进行测试,但这应该可以帮助您入门。您必须仔细研究定位和大小。

<a href="#" class="special">Somewhere<div class="desc">This is hidden.</div></a>

a.special { position:relative; }
a.special div.desc { background-color:white; display:none; position:absolute; z-index:100; }
a.special:hover div.desc { display:block; }

这将是纯 CSS 方式。

关于javascript - 如何在鼠标悬停时覆盖 div/box?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3874781/

相关文章:

html - 表格边框折叠问题

javascript - 在大屏幕上使 material-ui 网格环绕

html - 让 flex child 不拉伸(stretch)(但在绝对 parent 里面)?

javascript - CSS 裁剪 div 元素

javascript - 在 jade 中用 nodejs 发送处理变量

javascript - 单击并使用 add/removeClass 更改 header 的类

javascript - 从 MySQL 导出到 PHP 中的对象数组,然后导出到 JavaScript

javascript - jQuery 菜单 : Scroll after menu close

javascript jquery : Overwriting variables - how? 性能更好?

javascript - AngularJS如何拥有网站服务器SEO友好的页面