ホーム > HTML・CSS > CSS基本と応用 >
リンク領域の拡大 MENU 

テキストにだけのリンク表示をボックス全体に広げる、

メニューなどで使うボックス内にテキストを入れた場合にマウスホバーしたとき、テキストの入ったボックス全体の背景色を変えるなど、動的変化を付ける。

ボックス全体にリンク領域を広げる

文字を入れたボタン(リストやボックス)のリンクは、CSSで細工をして領域を広げない限り、文字の部分にしか反応しない(右例示の拡大前)。

拡大後の領域にマウスを重ねると、文字以外の全体の領域が選択されるようになる。 このようにすることによって、ボタンとしての操作感が格段に向上する。

html

CSS

※ ポイントは以下の3点です。

1)11行目、15行目:高さを確保する場合、paddingでは全体が選択出来ません。line:heightを使って下さい。

2)14行目:ul.menu_after a {display:block;} にするのが、最大のポイントです。

3)16行目:後は、マウスを重ねたときの背景色設定です。