繁体   English   中英

如何在鼠标悬停时叠加div / box?

[英]How to overlay div / box on mouseover?

我有一个链接,当用户将鼠标悬停在它上面时,它应该在链接下显示一个框(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方式。

我在这里创建了一个示例 您可以从那里进行修改以满足您的需求。

<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');
  });
});
$("#id").mouseover(function(){
   $("a[rel='#petrol']").overlay().load();
});
$("#id").mouseout(function(){
   $("a[rel='#petrol']").overlay().close();
});

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM