CSS में लिंक स्टेट्स

मुझे लगता है कि आपने इंटरनेट पर विभिन्न साइटों पर जाकर ध्यान दिया होगा कि लिंक आमतौर पर माउस को उन पर होवर करने पर प्रतिक्रिया करते हैं। ऐसा प्रभाव विभिन्न स्थितियों में लिंक के व्यवहार को निर्धारित करके प्राप्त किया जा सकता है।

उदाहरण के लिए, इस तरह - a:hover - हम उस स्थिति को पकड़ते हैं जब लिंक पर माउस कर्सर ले जाया जाता है। इस क्षण में, हम, उदाहरण के लिए, लिंक का रंग बदल सकते हैं या उसकी अंडरलाइनिंग हटा/जोड़ सकते हैं। संरचना :hover को स्यूडोक्लास कहा जाता है। स्यूडोक्लासेस तत्वों की विभिन्न स्थितियों को पकड़ने की अनुमति देते हैं।

:hover के अलावा और भी स्यूडोक्लासेस हैं :link, जो अनदेखी गई लिंक को पकड़ते हैं, और :visited, जो देखी गई लिंक को पकड़ते हैं। कुछ साइटों पर उनकी मदद से उपयोगकर्ताओं को दिखाया जाता है कि वे कहाँ थे, और कहाँ - नहीं। और स्यूडोक्लास भी है :active, जो अगली स्थिति को पकड़ता है: माउस से तत्व पर क्लिक किया गया, लेकिन अभी तक छोड़ा नहीं गया।

निम्नलिखित उदाहरण में, :hover स्थिति में लिंक की अंडरलाइनिंग हटा दी जाती है, :link स्थिति में लाल रंग निर्धारित किया जाता है, :visited स्थिति में - हरा, :active में - नीला। परिणामस्वरूप, यह निकलेगा कि शुरुआत में लिंक लाल रंग की होगी, उस पर क्लिक करने के बाद - हरी, यदि उस पर माउस से क्लिक करें और छोड़ें नहीं - नीली, और यदि माउस को होवर करें - तो अनअंडरलाइन्ड हो जाएगी:

cssa:link {
  color: red;
}
a:visited {
  color: green;
}
a:hover {
  text-decoration: none;
}
a:active {
  color: blue;
}

html<a href="#">link</a>

Результат: