How to overlay div / box on mouseover?

问题:

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?

回答1:

I have created a sample here. You can modify from there to suit your needs.

回答2:

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.

<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.

回答3:

$("#id").mouseover(function(){    $("a[rel='#petrol']").overlay().load(); }); $("#id").mouseout(function(){    $("a[rel='#petrol']").overlay().close(); }); 

文章来源: How to overlay div / box on mouseover?