要素のグリッド (3 x 3) 形成があり、ホバー時に可視性を簡単に切り替えることができます。
ただし、次のステップは、ホバーしたときにコンテナーを満たすように上記の要素を成長させることです。現在の (x,y) 値を取得し、これを親コンテナーの (x,y) 値に成長させる必要があると想定しています。 CSSポジショニングを使用しますが、私が取るすべてのアプローチはレンガの壁にぶつかっています。私はレイアウト/意図した機能を示すフィドルをここに持っています - http://jsfiddle.net/u2w7J/
どんな助けでも感謝します!
現在の HTML の設定方法では、滑らかに見えるようにしながらこれを達成するのはちょっと難しいです。最初の試みは、.toggleClass 関数を使用して、ホバーされた要素の「box」と「miniBox」を切り替えることです。デモについては、 http://jsfiddle.net/u2w7J/6/を参照してください。
miniBoxes は完全に配置されていないため、配置が難しくなります。したがって、アニメーションを追加すると、奇妙な結果が生じます (上記のデモを参照)。
miniBoxes を絶対に配置することをお勧めします。ホバリング時に、親の div の left と top の値を取得し、これらの値を使用して miniBox をアニメーション化します。さらに、アニメーション中またはアニメーションの前に z-index を上げて、他の miniBox が表示されないようにします。