💡 記事の下にエディタを用意しています。壊してもOK！
更新日: 2025年3月1日
CSSでホバー効果を付ける方法｜a:hover
📌
結論
:hover でマウスを乗せたときのスタイルが変えられます
📝 実際のコードはこちら
a:hover { color: red; }主な擬似クラス
| 擬似クラス | タイミング |
|---|---|
:hover | マウスを乗せたとき |
:focus | フォーカスしたとき |
:active | クリック中 |
アクセシビリティのポイント
:hover だけでなく :focus にも同じスタイルを付けると、キーボードユーザーにも親切です。
まとめ
・:hover でインタラクティブな見た目変化
・:focus も一緒に指定するのがベストプラクティス
演習で試してみよう
リンクにhoverで赤文字になるスタイルを付てみましょう。🧪 ここで試せます ─ 壊しても大丈夫！
下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。
■ 演習
aタグにマウスを乗せたとき、文字色を赤にしてください。
詰まったらヒント
a:hover { color: red; }