要素の位置に基づいてホバーを配置する方法

Please see the following jsfiddle: http://jsfiddle.net/bhellman1/Na3hd/11/

今すぐボックスの上を移動すると、ホバーボックスはすべてのアイテムの同じ場所に表示されます。

私がしたいのは、#box.cornerに基づいてホバーボックスを配置することです。 #box.cornerがボックスの左側にある場合は、ボックスの外側の左にあるホバーボックスを角の中央に配置したいと思います。ボックスの下にある#box.cornerにマウスを重ねると右に、ホバーボックスが右下隅に表示され、コーナーの中央に表示されます。

どのようにこれを達成するための任意のアイデア?

ありがとう

1
あなたのコードもここに投稿してください。 jsfiddlesは消える傾向があります。
追加された 著者 Jonathan M,

1 答え

If I read your question correctly, this should be what youre looking for: http://jsfiddle.net/Na3hd/17/

あなたが見ることができるように、私はいくつかの共通の要素が共通しているので、コードを簡単に再利用して他の要素に割り当てることができるように、CSSのいくつかを移動しました。私はhoverboxの定義をmouseenter関数に移しました。新しい div が各マウスセンターで作成され、位置を設定するときに複雑にならないようになりました。

お役に立てれば!

編集

Here a more dynamic approach: http://jsfiddle.net/Na3hd/22/

また、私はちょうどあなたがボックスの外にこれらのアイテムを表示したいと思った。

1
追加された
興味深い問題は、動的ではなく、実際には動作しないようにハードコードされています...私はそれが任意のサイズ/場所のボックスで動作するように位置を動的に計算する必要があります。ボックス私はそれを右に表示する必要があります、
追加された 著者 AnApprentice,
私はちょうど私の答えを編集しました。これはあなたが探しているものですか?
追加された 著者 Joey,
すべての作業が終わったら、ここにコードを投稿してください。 jsfiddlesは消える傾向があります。 :)
追加された 著者 Jonathan M,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript