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

Question

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

Answer 1

您有一个隐藏的绝对定位的 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 方式。