تأثيرات التمرير (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);

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

ورقة مرجعية

تغير الفئة الزائفة :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>

اختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.