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>

Результат: