لینکها در CSS دارای چهار حالت مختلف شامل بازدید نشده، بازدید شده، هاور و اکتیو هستند که با استفاده از شبهکلاسها میتوان برای هرکدام استایل جداگانه تعیین کرد.
هر لینک ۴ حالت دارد که متفاوت استایل میشوند:
| حالت | شبهکد | توضیح |
|---|---|---|
| Link | :link | لینک بازدید نشده (عادی) |
| Visited | :visited | لینک قبلاً کلیک شده |
| Hover | :hover | ماوس روی لینک |
| Active | :active | در حال کلیک (فشار ماوس) |
ترتیب حیاتی: LVHA (:link → :visited → :hover → :active)
a:link { color: #FF0000; } /* قرمز - عادی */
a:visited { color: #00FF00; } /* سبز - بازدیدشده */
a:hover { color: #FF00FF; } /* بنفش - ماوس روی آن */
a:active { color: #0000FF; } /* آبی - کلیک */چرا ترتیب LVHA؟
بدون ترتیب درست: hover ممکنه روی active اثر نذاره!| مرورگر | Link | Visited | Active |
|---|---|---|---|
| Chrome/Firefox | آبی (#0000EE) | بنفش (#551A8B) | قرمز |
| Safari | آبی | خاکستری | قرمز موقت |
مشکل: نامنظم + خط زیر مزاحم!
a:link { color: #369; } /* آبی تیره */
a:visited { color: #666; } /* خاکستری */
a:hover { color: #e74c3c; } /* قرمز زنده */
a:active { color: #c0392b; } /* قرمز تیره */بهترین روش: none + جایگزین بصری.
a:link, a:visited {
text-decoration: none;
border-bottom: 1px dotted #369; /* نقطهچین ظریف */
}
a:hover, a:active {
border-bottom: 2px solid #e74c3c; /* خط ضخیم رنگی */
color: #e74c3c;
}چرا نقطهچین؟
برچسبها: CSS, لینک, :hover, :active, pseudo-class, لینک responsive