Javascriptを使用してMouseOver上の他の要素の上に要素を表示

Question

Espin.comのthis pageにある場合、右上に移動して「myESPN」にカーソルを合わせると、インラインポップアップウィンドウが表示されます（最初のボタンに接続されているように）、ユーザがサイトにログインできるようにします。

htmlでは、隠されたdivが表示され、マウスが特定の要素を超えたときに前面にプッシュされ、マウスが呼び出し元の要素に残っている限り表示されているように見えます。新しく表示された要素自体。

私は同様のことをするつもりです。しかし、Firebugでちょっと調べた後、どうやってそれを行うのかを正確に特定することはできません。私はそれがjavascript、おそらくjqueryも含んでいると想定しています - 誰も実装の詳細を助けることができますか？

Answer 1

あなたが必要とするのは、絶対配置されたdiv要素です。あなたがそれを表示する方法を配置します。次に、style = "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(); 
}); 

編集：
それを隠すために：

 
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