Как наложить 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();
});