ホバーエフェクト

CoddyのHTMLジャーニー「CSS Mastery」セクションの一部 — レッスン 8/43。

:hover 疑似クラスを使用すると、ユーザーがマウスを要素の上に置いたときに、その要素のスタイルを変更できます。

ボタンの上にホバーしたときにテキストの色が変わる簡単な例を次に示します：

button {
  color: black;
}

button:hover {
  color: red;
}

この例では、ボタンのテキストはデフォルトで黒ですが、ホバーすると赤に変わります。

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

チャレンジ

簡単

ホバーしたときにスタイルが変わるボタンがあります。あなたのタスクは以下の通りです：

:hover 疑似クラスを使用して、ユーザーがボタンの上にカーソルを置いたときにボタンの背景色を green に変更します。
ホバー効果中にボタンにボックスシャドウを適用して、浮き上がっているように見せます。次のように box-shadow を使用してください：

box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);

これにより、オフセット、ぼかし、色が指定された影が追加されます。

チートシート

:hover 疑似クラスは、ユーザーが要素の上にマウスをホバーさせたときに、その要素のスタイルを変更します。

button {
  color: black;
}

button:hover {
  color: red;
}

この例では、ボタンのテキストはデフォルトで黒ですが、その上にホバーするとテキストが赤に変わります。

自分で試してみよう

<html>
<head>
    <title>Hover Effects</title>
    <style>
        .hover-button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
        }
        /* CSS solution goes here */
        
    </style>
</head>
<body>
    <button class="hover-button">Hover over me!</button>
</body>
</html>

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。