我有一个链接,当用户将鼠标悬停在它上面时,它应该在链接下显示一个框(div)。盒子应该覆盖它下面的任何东西。我如何使用CSS或JavaScript做到这一点?如何在鼠标悬停上叠加div/box?
8
A
回答
6
我已创建sample here。您可以从那里修改以满足您的需求。
<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');
});
});
11
你有一个绝对定位的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方式。
+0
,因为它不需要任何JavaScript真的很不错。非常感谢 !!! – svirk 2010-10-06 17:59:52
0
$("#id").mouseover(function(){
$("a[rel='#petrol']").overlay().load();
});
$("#id").mouseout(function(){
$("a[rel='#petrol']").overlay().close();
});
+0
为了提高你的文章的质量,请包括如何/为什么此代码将解决问题。 – 2012-10-04 10:02:14
相关问题
- 1. 在鼠标悬停上添加叠加层
- 2. 如何在鼠标悬停
- 3. 将鼠标悬停在鼠标上
- 4. QScrollBar在鼠标悬停上
- 5. 鼠标悬停在块上
- 6. 在鼠标悬停上添加边框
- 7. 在鼠标悬停上添加内容
- 8. 如何在鼠标悬停社交图标上添加文字
- 9. 如何添加鼠标悬停总结
- 10. SugarCRM的 - 如何添加鼠标悬停
- 11. 如何鼠标悬停
- 12. 重叠jquery鼠标悬停事件
- 13. 图片上鼠标悬停
- 14. 将鼠标悬停在任何段落上,在div上添加小信息,将鼠标悬停,淡出,是吗?
- 15. jcarousel停在鼠标悬停
- 16. 鼠标悬停
- 17. 鼠标悬停
- 18. 鼠标悬停
- 19. 鼠标悬停
- 20. 如何解决鼠标悬停在jQuery重叠的图像?
- 21. 如何在Bootstrap中将鼠标悬停在表上悬停在表上?
- 22. 如何显示鼠标悬停/悬停上单元格的值
- 23. 将鼠标悬停在dbgrid标题上
- 24. 如何在鼠标悬停的事件上添加索引?
- 25. 检测鼠标悬停在重叠+透明图像上
- 26. CSS:将鼠标悬停在3个堆叠的图像上
- 27. 如何更改鼠标指针上的鼠标悬停分手?
- 28. 鼠标悬停从鼠标隐藏堆叠的元素(HitTesting)
- 29. 鼠标悬停在鼠标悬停KMLLayer谷歌地图
- 30. 没有在鼠标悬停/鼠标悬停定义jQuery事件
如果我在叠加下添加一个div,并且想要覆盖它,那么该怎么做? Currenlty,我看到悬停下创建的空白区域用于覆盖以便进行dsplayed。 – svirk 2010-10-13 14:57:36
这个覆盖div实际上没有覆盖。这并不能解决问题,“盒子应该覆盖任何东西。” – 2013-10-22 20:53:43