تمييز القائمة النشطة
جزء من قسم 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 مموهةتدرّب بنفسك: Playground لـ Web