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

Question

さらに

質問

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

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

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

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

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

ありがとう

css3

人気

1

Roxana Elizabeth CASTILLO Avalos

2

3

4

5

Joey · Answer 1 · 2011-10-27T23:05:51+00:00

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/

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