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

Question

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

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

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

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

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

ありがとう

1

追加された 27 10月 2011 〜で 10:46 著者 AnApprentice

ビュー: 10

源

あなたのコードもここに投稿してください。 jsfiddlesは消える傾向があります。

追加された 24 1月 2012 〜で 04:11, 著者 Jonathan M, 源

1 答え

著者 Joey · Answer 1 · 2011-10-27T11:05Z

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/

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