0

Espn.comのこのページで、右上隅に移動して「myESPN」にカーソルを合わせると、インライン ポップアップ ウィンドウ (それが呼び出される場合) が表示されます (最初のページに接続されているように見えます)。ボタン)、ユーザーがサイトにログインできるようにします。

htmlには、マウスが特定の要素の上に移動すると表示され、前面に押し出され、マウスが呼び出し元の要素または新しく表示された要素上にある限り、表示されたままになる非表示のdivがあるように見えます自体。

私は似たようなことをしようとしています。ただし、Firebug を少し調べてみたところ、それがどのように行われているかを正確に特定できません。私はそれがjavascript、そしておそらくjqueryにも関係していると思います - 誰でも実装の詳細を手伝ってもらえますか?

4

2 に答える 2

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タイムアウト;
$（'＃elementToHover'）。mouseout（function（）{
    タイムアウト=setTimeout（ "hide（）"、1000）;
}）;
$（'＃layer'）。mouseover（function（）{
    clearTimeout（timeout）;
}）;
$（'＃layer'）。mouseout（function（）{
    タイムアウト=setTimeout（ "hide（）"、1000）;
}）;
関数hide（）{
    $（'＃layer'）。hide（）;
}

または同様のもの...

于 2009-07-27T10:02:09.923 に答える
1

あなたを助けるための良いツールは、次のビジュアルイベントブックマークレットです。これにより、ページ上の要素に関連付けられているすべてのイベントを確認できます。

ページ上で実行すると、オーバーレイが表示され、スクリプトイベントを持つ要素の横に小さなアイコンが配置されます。アイコンにカーソルを合わせると、実際のjsが表示されます。開発者がjsを縮小するのに十分な能力を持っている場合は、表示されるスクリプトはあまり意味がないことに注意してください。

代替テキスト
（出典：gyazo.com）

于 2009-07-27T10:05:11.197 に答える