تأثيرات التمرير (Hover)

جزء من قسم CSS Mastery في رحلة HTML على Coddy — الدرس 8 من 43.

تسمح لك الفئة الزائفة :hover بتغيير نمط العنصر عندما يمرر المستخدم الماوس فوقه.

إليك مثال بسيط يغير لون النص عند تمرير الماوس فوق الزر:

button {
  color: black;
}

button:hover {
  color: red;
}

في هذا المثال، يكون نص الزر باللون الأسود افتراضيًا، ولكن عند تمرير الماوس فوقه، يتحول النص إلى اللون الأحمر.

التحدي

سهل

لديك زر يحتاج إلى تغيير نمطه عند تمرير الماوس فوقه. مهمتك هي:

استخدم الفئة الزائفة :hover لتغيير لون الخلفية للزر إلى green عندما يقوم المستخدم بتمرير الماوس فوقه.
قم بتطبيق ظل (box shadow) على الزر أثناء تأثير التمرير لجعله يبدو وكأنه مرتفع. استخدم box-shadow بهذا الشكل:

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

يضيف ظلاً مع إزاحة، وتمويه، ولون.

جرّب بنفسك

<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>