如何在鼠标悬停时覆盖div / box？ [英] How to overlay div / box on mouseover?

问题描述

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

I have a link and when user hover mouse over it, it should display a box (div) under the link. The box should overlay whatever is under it. How can I do it using css or javascript?

推荐答案

我创建了一个示例。

<div class="hover">Hover here</div>
<div class="overlay" style="visibility:hidden">
<img src="http://www.google.com/images/logos/ps_logo2.png" alt="google" />
</div>​


$(document).ready(function()
{
  $("div.hover").mouseover(function ()
  {
    $(this).css('cursor', 'pointer');
    $("div.overlay").css('visibility','visible');
  });
  $("div.hover").mouseout(function ()
  {
    $(this).css('cursor', 'default');
    $("div.overlay").css('visibility','hidden');
  });
});

这篇关于如何在鼠标悬停时覆盖div / box？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！