今回の課題

ボタンにマウスを乗のせると色いろが変かわるようにしよう！

📖 解説を見る

✨ マウスを乗のせたとき変化へんかさせよう！

:hover は「マウスが乗のっているとき」のスタイルを指定していできます。

✏️ 書かき方かた：

button:hover {
  background-color: darkblue;
}

⚠️ ポイント：
・:hover はセレクターの後あとにつける
・transition と組くみ合あわせるとなめらかに変化へんかする
・リンク・ボタン・カードなどに使つかうとクリックしやすくなる！

ヒントを見る

button:hover { background-color: darkblue; } と書こう！

📄 見本

「答えを見る」を押すと、お手本のプレビューとコードが出ます。

💻 コードエディタ

あなたの出力

🏠 ホームへ

れんしゅうもんだい

☑ 0 / 3 正解レッスンに戻る

全問正解でクエストクリア！

未挑戦

問題 1: リンク <a> にホバーで色いろが変かわるスタイルをつけよう！（自由じゆう回答かいとう）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

未挑戦

問題 2: カードに :hover で影かげ（box-shadow）をつけよう！（自由じゆう回答かいとう）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

未挑戦

問題 3: p:hover { color: red; } で段落だんらくにホバーエフェクトをつけよう！（自由じゆう回答かいとう）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

次のクエスト →

クエスト10：ホバーエフェクト