如何在鼠標懸停時疊加div / box？

Question

我有一個鏈接，當用戶將鼠標懸停在它上面時，它應該在鏈接下顯示一個框（div）。 該框應覆蓋其下的任何內容。 我怎么能用css或javascript做到這一點？

Answer 1

你有一個隱藏的絕對定位的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方式。

Answer 2

我在這里創建了一個示例 。 您可以從那里進行修改以滿足您的需求。

<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');
  });
});

Answer 3

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