How to overlay div / box on mouseover?

Question

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 javascri

Answer 1

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

Hover here


​


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