Καταστάσεις συνδέσμων στο 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>

Результат: