Hover σε διεπαφές: τι είναι, τύποι εφέ και υλοποίηση

Τι είναι το hover στον σχεδιασμό ιστοσελίδων

Hover (από το αγγλικό hover — αιωρούμαι) — οπτική αντίδραση ενός στοιχείου διεπαφής στην τοποθέτηση του δείκτη του ποντικιού πάνω του. Ο όρος χρησιμοποιείται τόσο για την ίδια την ψευδοκλάση CSS :hover όσο και για την κατάσταση του στοιχείου κατά την κατάδειξη.

Η έννοια του hover εμφανίστηκε στις πρώτες γραφικές διεπαφές Xerox Alto (1973) και τυποποιήθηκε στον ιστό με την εμφάνιση του CSS2 το 1998. Από τότε, το hover αποτελεί αναπόσπαστο μέρος της εμπειρίας χρήστη σε επιτραπέζιους υπολογιστές.

Σύμφωνα με το CSS Usage Statistics (2025), το 94% των ιστοσελίδων στην κορυφαία 1000 χρησιμοποιεί την ψευδοκλάση :hover για τουλάχιστον ένα στοιχείο. Το hover εφαρμόζεται συχνότερα σε κουμπιά (89%), συνδέσμους (85%) και κάρτες (62%).

Διαφορά του hover από άλλες καταστάσεις

Hover ≠ active. Το :hover ενεργοποιείται κατά την κατάδειξη, το :active — τη στιγμή του κλικ. Το :focus ενεργοποιείται κατά την εστίαση μέσω πληκτρολογίου. Κάθε κατάσταση επιλύει τη δική της λειτουργία. Το hover είναι προεπισκόπηση, το active είναι επιβεβαίωση ενέργειας.

Ψευδοκλάση :hover στο CSS

Η ψευδοκλάση :hover στο CSS εφαρμόζει στυλ σε ένα στοιχείο όταν ο χρήστης τοποθετεί τον δείκτη του ποντικιού πάνω του. Λειτουργεί με οποιοδήποτε στοιχείο HTML, αλλά χρησιμοποιείται συχνότερα με διαδραστικά στοιχεία.

/* Basic hover implementation */
.button {
    background: #4A90D9;
    color: white;
    padding: 12px 24px;
    border: none;
    transition: all 0.3s ease;
}

.button:hover {
    background: #357ABD;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74,144,217,0.4);
}

Ειδικότητα του επιλογέα :hover — ίδια με της κλάσης (0,1,0). Εάν χρειάζεται να παρακάμψετε το hover για ένα συγκεκριμένο στοιχείο, χρησιμοποιήστε έναν επιλογέα με υψηλότερη ειδικότητα. Η σειρά δήλωσης είναι σημαντική: εάν δηλώσετε το :hover μετά το :focus, το hover μπορεί να μην λειτουργεί κατά την εστίαση.

Συνδυασμένες ψευδοκλάσεις

Το :hover μπορεί να συνδυαστεί με άλλες ψευδοκλάσεις για τη δημιουργία σύνθετης λογικής. Για παράδειγμα, το .card:hover .card__title αλλάζει το στυλ του τίτλου μέσα στην κάρτα όταν τοποθετείτε τον δείκτη πάνω σε ολόκληρη την κάρτα. Αυτό επιτρέπει τη δημιουργία εφέ με ένθετη κινούμενη εικόνα.

Τύποι εφέ hover

Τα εφέ hover χωρίζονται σε διάφορες κατηγορίες ανάλογα με τον τύπο της ιδιότητας που αλλάζει. Κάθε τύπος είναι κατάλληλος για διαφορετικά σενάρια και δημιουργεί ένα συγκεκριμένο συναίσθημα στον χρήστη.

Ο πιο αποτελεσματικός τύπος — συνδυασμός εφέ χρώματος και σκιάς. Το Material Design συνιστά τη χρήση αλλαγής ύψους σκιάς ως κύριο τύπο ανατροφοδότησης hover.

Σύμφωνα με το Google Material Design (2024), το εφέ hover πρέπει να είναι αισθητό αλλά όχι αποσπώντας την προσοχή. Η προτεινόμενη διάρκεια κινούμενης εικόνας — 200–300 χιλιοστά του δευτερολέπτου. Τα πολύ γρήγορα εφέ (κάτω από 100 ms) μπορεί να μην γίνουν αντιληπτά, τα πολύ αργά (πάνω από 500 ms) εκνευρίζουν τον χρήστη.

CSS μεταβάσεις για ομαλά εφέ

Η ιδιότητα CSS transition κάνει τα εφέ hover ομαλά, κινώντας την αλλαγή ιδιοτήτων στον χρόνο. Χωρίς transition, το hover ενεργεί ακαριαία, που φαίνεται τραχύ και δυσάρεστο στο μάτι.

/* Different transitions per property */
.card {
    transition:
        box-shadow 0.3s ease-out,
        transform 0.2s ease-out,
        background 0.15s linear;
}

.card:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    transform: translateY(-4px);
}

Η διάρκεια του transition εξαρτάται από τα συμφραζόμενα. Για μικρά στοιχεία (εικονίδια, σύνδεσμοι) — 150–200 ms. Για μεγάλα στοιχεία (κάρτες, παράθυρα modal) — 250–350 ms. Η συνάρτηση easing ease-out επιβραδύνει σταδιακά την κινούμενη εικόνα στο τέλος, δημιουργώντας μια φυσική αίσθηση.

Προτεινόμενη πρακτική — καθορίστε το transition για κάθε κινούμενη ιδιότητα ξεχωριστά. Η ιδιότητα all είναι βολική στο στάδιο ανάπτυξης, αλλά στην παραγωγή είναι καλύτερο να ορίζετε συγκεκριμένες ιδιότητες για κινούμενη εικόνα για να αποφύγετε απροσδόκητα εφέ.

Hover σε συσκευές αφής

Στις συσκευές αφής η έννοια του hover δεν υπάρχει: δεν υπάρχει δείκτης που μπορεί να τοποθετηθεί πάνω σε ένα στοιχείο. Το άγγιγμα ενός στοιχείου ενεργοποιεί αμέσως click, παρακάμπτοντας την κατάσταση hover. Αυτό δημιουργεί προβλήματα εάν η διεπαφή βασίζεται αποκλειστικά στο hover.

Σύμφωνα με το StatCounter (2026), το 62% της παγκόσμιας διαδικτυακής κίνησης προέρχεται από κινητές συσκευές. Το να αγνοείτε την απουσία hover σε οθόνες αφής σημαίνει απώλεια ελέγχου της UX για την πλειοψηφία των χρηστών.

/* Disable hover on touch devices */
@media (hover: none) and (pointer: coarse) {
    .button:hover {
        background: initial;
        transform: none;
    }
}

Το ερώτημα μέσων hover: none επιτρέπει τον προσδιορισμό ότι η συσκευή δεν υποστηρίζει κατάδειξη. Σε τέτοιες συσκευές, τα εφέ hover απενεργοποιούνται και η αλληλεπίδραση βασίζεται στις καταστάσεις :active και :focus. Εναλλακτική λύση — εμφάνιση περιεχομένου hover στο άγγιγμα (το πρώτο άγγιγμα δείχνει το hover, το δεύτερο εκτελεί την ενέργεια), αλλά αυτό το μοτίβο χειροτερεύει την UX.

Προσβασιμότητα εφέ hover

Η προσβασιμότητα του hover — μια κρίσιμη πτυχή που συχνά παραβλέπεται. Οι χρήστες που ελέγχουν τη διεπαφή με το πληκτρολόγιο δεν μπορούν να ενεργοποιήσουν το :hover. Οι λειτουργίες που είναι διαθέσιμες μόνο μέσω hover καθίστανται μη προσβάσιμες για αυτούς.

Κανόνας WCAG 2.2 (Success Criterion 1.4.13 — Content on Hover or Focus): το περιεχόμενο που εμφανίζεται κατά το hover πρέπει να είναι προσβάσιμο και κατά την εστίαση. Εάν το hover εμφανίζει πρόσθετες πληροφορίες (tooltip, αναδυόμενο μενού), οι ίδιες πληροφορίες πρέπει να είναι διαθέσιμες στο :focus.

/* Hover + focus for accessibility */
.tooltip-trigger:hover .tooltip,
.tooltip-trigger:focus .tooltip {
    opacity: 1;
    visibility: visible;
}

/* Disable animation for vestibular disorder */
@media (prefers-reduced-motion: reduce) {
    *:hover {
        transition: none;
    }
}

Το ερώτημα μέσων prefers-reduced-motion — σέβεται τις ρυθμίσεις συστήματος των χρηστών. Εάν ο χρήστης έχει απενεργοποιήσει την κινούμενη εικόνα στο σύστημα, τα εφέ hover πρέπει να εφαρμόζονται ακαριαία, χωρίς transition. Αυτό βοηθά άτομα με αιθουσαίες διαταραχές.

Πρόσθετες συστάσεις: μην χρησιμοποιείτε hover για κρίσιμες λειτουργίες, μην χρησιμοποιείτε μόνο χρώμα για τη μετάδοση πληροφοριών στο hover (προσθέστε εικονίδιο ή κείμενο) και εξασφαλίστε επαρκή αντίθεση για τις καταστάσεις hover.