ホバーで変化をつける
反応が無いと押せるか分からない
ボタンにマウスを乗せても何も起きないと、押せる場所なのか判断できません。逆に、乗せた瞬間に色が変わると、そこが操作できる場所だと一目で伝わります。CSS はこの「乗せているあいだ」の見た目を、疑似クラスという書き方で指定できます。
hover はもとのルールに足す
セレクタのうしろに :hover を付けると、マウスが乗っているあいだだけ当たるルールになります。
a {
color: #0071e3;
}
a:hover {
color: #004f9e;
}もとのルールは消しません。:hover のほうが乗せたときだけ上書きし、マウスを外すと元に戻ります。変えるのは色や背景色のように、周りのレイアウトが動かないものにしておくと安全です。文字の大きさを変えると、乗せるたびに行が押し出されて読みにくくなります。
指の形でも伝える
もうひとつ大事なのが cursor です。button タグで作ったボタンでも、矢印のままでは押せる感じがしません。cursor: pointer; を書くと指の形になり、クリックできる場所だと伝わります。
今回はリンク、趣味のタグ、表の行、入力欄、送信ボタンの5か所に :hover を足します。リンクは普段の下線を消しておき、乗せたときだけ下線を出す形にします。
課題
- a に
text-decoration: none;を足し、a:hoverで色を濃くして下線を出す .hobby-item、.skill-table tbody tr、.form-inputに:hoverのルールを足す.submit-buttonにcursor: pointer;を足し、.submit-button:hoverで背景色を変える