تمييز القائمة النشطة
جزء من قسم CSS Mastery في رحلة HTML على Coddy — الدرس 39 من 43.
التحدي
سهليتم توفير قائمة تنقل بسيطة تحتوي على أربعة روابط. مهمتك هي جعلها أكثر تفاعلية باستخدام الفئات الزائفة (pseudo-classes).
اكتب CSS لـ:
- تغيير لون خلفية الرابط عند تمرير المستخدم فوقه إلى
rgba(50, 168, 82, 1). - تغيير لون النص إلى white عندما يتم النقر على الرابط بشكل نشط.
جرّب بنفسك
<html>
<head>
<title>Highlight Active Menu</title>
<style>
nav a {
padding: 10px;
text-decoration: none;
color: black;
}
/* Add your styles here */
</style>
</head>
<body>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#" class="active">Blog</a>
<a href="#">Contact</a>
</nav>
</body>
</html>
جميع دروس CSS Mastery
1إتقان المحددات – الربط
مقدمةمحدد الأحفادمحدد الأبناءمحدد الأشقاء المتجاورينمحدد الأشقاء العامتحدي المراجعة3الأصناف الزائفة الهيكلية (Structural pseudo-classes)
الأصناف الزائفة الهيكلية (Structural pseudo-classes)استهداف الابن الأولاستهداف الابن الأخيرقوة الأنماط: استخدام nth-childتحدي المراجعة9التحديات النهائية
تمييز القائمة النشطةصفوف الجدول المخططةتأثير تمرير الماوس على الزرتخطيط البطاقات بنظام Gridصورة Hero مموهة