（5）POINT D　ロールオーバーで文章の表示・非表示を切り替える

2008.1.29 TUE

プロならではのアイデアが満載！
ＷＥＢレイアウトのネタ帖

第1回　写真を生かしながら多くの文章を表示できるレイアウト

POINT D
ロールオーバーで文章の表示・非表示を切り替える

●overflowをhiddenにして文章を隠す
●padding-topで表示領域から追い出す

[1]	「textBox」クラスの高さを0にし、overflowをhiddenに、padding-topを250pxにする［1］。 overflowをhiddenにすることによって、div要素からはみ出した部分は表示されなくなり、さらにpaddingで表示する領域から追い出すことになる。
[2] [3]	Dreamweaverでは、divボックスが長く伸びたように表示されているが［2］、 Firefoxで確認すると文章が消えている［3］。
[4]	これでは消えたままなので、「.textBox:hover」というセレクタに、ロールオーバーした状態の設定を行う。高さを250pxに戻し、padding-topを0にする［4］。
[5] [6]	これによって、ロールオーバーするとその部分の文章が表示されるようになる［5］［6］。