تحريك الأيقونة عند Hover

الدرس 12 من 12 في دورة شريط التنقل السفلي - مشروع HTML/CSS على Coddy.

لنقم بإضافة تأثير الانتقال على كل أيقونة. والذي سنستخدم من أجله محدد :hover الخاص بـ CSS:

التحدي

سهل

لإنشاء تأثير التحويم على أيقونة، يمكنك إضافة كود CSS التالي (يمكنك تعديل الألوان!):

.navigation ul li:hover {
    color: purple;
    transform: scale(1.2);
    background-color: #fff;
    border-radius: 50%;
}

وهكذا نكون قد انتهينا! أصبح شريط التنقل جاهزًا الآن. يمكنك تمرير الماوس فوق أي أيقونة في شريط التنقل لرؤية تأثير الانتقال الذي أضفته.

برمجة سعيدة !!

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>

جميع دروس شريط التنقل السفلي - مشروع HTML/CSS

1شريط التنقل (Navigation Bar)

إعداد الكود الحاوية الرئيسية (main-container)

شريط التنقل (Navbar)

القائمة غير المرتبة والعنوان

عناصر القائمة والعناوين

2التنسيق

تنسيق القائمة غير المرتبة

تنسيق عناصر القائمة

تحريك الأيقونة عند Hover درس مشروع