javascript 如何在鼠标悬停时覆盖 div / box？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3874781/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to overlay div / box on mouseover?
提问by svirk
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)。盒子应该覆盖它下面的任何东西。我如何使用 css 或 javascript 来做到这一点？
采纳答案by bla
I have created a sample here. You can modify from there to suit your needs.
我在这里创建了一个示例。您可以从那里进行修改以满足您的需要。
<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');
});
});
回答by Edgar
You have an absolutely positioned div that is hidden, and a child of the link. Then, when you hover over the link, you should unhide the div. I can't provide full CSS, and I haven't tested this, but that should get you started. You'll have to play around with the positioning and sizes.
您有一个隐藏的绝对定位 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; }
This would be the pure-CSS way.
这将是纯 CSS 方式。
回答by Ahsan Hussain
$("#id").mouseover(function(){
$("a[rel='#petrol']").overlay().load();
});
$("#id").mouseout(function(){
$("a[rel='#petrol']").overlay().close();
});
