Показать элементы HTML над другими элементами на MouseOver с помощью Javascript

Question

На странице this page в Espn.com, если вы перейдете в верхний правый угол и наведите указатель мыши на «myESPN», появится всплывающее окно (если это то, что его можно вызвать) (таким образом, чтобы он был связан с начальной кнопкой) и позволяет пользователю входить на сайт.

В html это похоже на скрытый div, который становится видимым и перемещается на передний план, когда мышь переходит через определенный элемент и остается в поле зрения, пока мышь остается на вызывающем элементе, или недавно показанный элемент.

Я ищу что-то подобное. Тем не менее, после того, как я немного окунулся в Firebug, я не могу точно определить, как это делается. Я предполагаю, что он включает javascript и, возможно, jquery, может ли кто-нибудь помочь в специфике реализации?

Answer 1

Что вам нужно, это абсолютно позиционированный div-элемент, который вы позиционируете так, как хотите. Затем вы спрячете его со стилем = «display: none;», и при наведении на нужный элемент вы покажете его. С JQuery, который был бы:

HTML: 
<div id="layer" style="display: none; position: absolute; top: 10px; left: 300px;">something</div> 

 
Javascript: 
$('#elementToHover').mouseover(function() { 
    clearTimeout(timeout); 
    $('#layer').show(); 
}); 

Edit:
Чтобы скрыть:

 
var timeout; 
$('#elementToHover').mouseout(function() { 
    timeout = setTimeout("hide()", 1000); 
}); 
$('#layer').mouseover(function() { 
    clearTimeout(timeout); 
}); 
$('#layer').mouseout(function() { 
    timeout = setTimeout("hide()", 1000); 
}); 
function hide() { 
    $('#layer').hide(); 
} 

или что-то подобное ...

Answer 2

Хороший инструмент, чтобы помочь вам является следующим Visual Event bookmarklet. Он позволяет вам видеть все события, привязанные к элементам на странице.

При запуске на странице отображается оверлей и маленькие значки расположены рядом с элементами, которые имеют события сценария. Вы можете навести значки, чтобы увидеть фактические js. Будьте осторожны, если разработчики были достаточно хороши, чтобы минимизировать js, тогда сценарий, который вы видите, не будет иметь особого смысла.

alt text http://gyazo.com/c9064bb659a346f9737ea65c049b03cd.png