テキストにだけのリンク表示をボックス全体に広げる
メニューなどで使うボックス内にテキストを入れた場合にマウスホバーしたとき、テキストの入ったボックス全体の背景色を変えるなど、動的変化を付ける。
ボックス全体にリンク領域を広げる
文字を入れたボタン(リストやボックス)のリンクは、CSSで細工をして領域を広げない限り、文字の部分にしか反応しない(右例示の拡大前)。
拡大後の領域にマウスを重ねると、文字以外の全体の領域が選択されるようになる。 このようにすることによって、ボタンとしての操作感が格段に向上する。
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!-- 拡大前 --> <ul class="menu_before"> <li>拡大前</li> <li><a href="*">Sample-A</a></li> <li><a href="*">Sample-B</a></li> <li><a href="*">Sample-C</a></li> </ul> <!-- 拡大後 --> <ul class="menu_after"> <li>拡大後</li> <li><a href="*">Sample-A</a></li> <li><a href="*">Sample-B</a></li> <li><a href="*">Sample-C</a></li> </ul> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/* 拡大前 */ .menu_before a:hover {background-color:#6f6;} .menu_before li {border:solid 1px #000; text-align:center; line-height:40px;} .menu_before li:nth-child(n+2):nth-child(-n+4){ border-top:none;} /* 拡大後 */ .menu_after li {border:solid 1px #000; text-align:center; line-height:40px;} .menu_after li:nth-child(n+2):nth-child(-n+4){ border-top:none;} ul.menu_after a {display:block; line-height:40px;} ul.menu_after a:hover {background-color:#6f6;} /* メニュー上部のタイトル表示 */ .menu_before li:first-child, .menu_after li:first-child { background-color:#99f;} |
※ ポイントは以下の3点です。
1)11行目、15行目:高さを確保する場合、paddingでは全体が選択出来ません。line:heightを使って下さい。
2)14行目:ul.menu_after a {display:block;} にするのが、最大のポイントです。
3)16行目:後は、マウスを重ねたときの背景色設定です。