Ψευδαισθήκη :hover CSS
- τη προηγούμενη σελίδα :has()
- Επόμενη σελίδα :in-range
- Επιστροφή στο προηγούμενο επίπεδο Εγχειρίδιο αναφορών ψευδοτύπων CSS
Ορισμός και χρήση
CSS :hover
Οι ψευδαισθήκες χρησιμοποιούνται για να επιλέξουν στοιχεία όταν ο δείκτης του ποντικιού βρίσκεται πάνω τους.
Συμβουλή::hover
Οι ψευδαισθήκες μπορούν να χρησιμοποιηθούν για όλα τα στοιχεία, και όχι μόνο για τους συνδέσμους.
Συμβουλή:Χρησιμοποιήστε :link
Ρυθμίστε το στυλ των συνδέσμων σε ιστοσελίδες που δεν έχουν επισκεφθεί, χρησιμοποιώντας :visited
Ρυθμίστε το στυλ των συνδέσμων σε ιστοσελίδες που έχουν επισκεφθεί, χρησιμοποιώντας :active
Ρυθμίστε το στυλ των ενεργών συνδέσμων.
Σημείωση:Στο CSS,:hover
πρέπει να τοποθετηθεί :link
και :visited
(αν υπάρχει) για να εφαρμοστεί!
Παράδειγμα
Παράδειγμα 1
Επιλέξτε και ρυθμίστε το στυλ των συνδέσμων όταν ο δείκτης του ποντικιού βρίσκεται πάνω τους:
a:hover { background-color: yellow; font-size: 18px; }
Παράδειγμα 2
Επιλέξτε και ρυθμίστε το στυλ των στοιχείων <p>, <h1> και <a> όταν ο δείκτης του ποντικιού βρίσκεται πάνω τους:
p:hover, h1:hover, a:hover { background-color: yellow; }
Παράδειγμα 3
Επιλογή και ρύθμιση των στιγμιοτύπων για τους σύνδεσμους που δεν έχουν επισκεφθεί, που έχουν επισκεφθεί, που βρίσκονται στο ποντίκι και ενεργούς:
/* Σύνδεσμοι που δεν έχουν επισκεφθεί */ a:link { color: green; } /* Σύνδεσμοι που έχουν επισκεφθεί */ a:visited { color: green; } /* Σύνδεσμοι που βρίσκονται στο ποντίκι */ a:hover { color: red; } /* Σύνδεσμοι ενεργούς */ a:active { color: yellow; }
Παράδειγμα 4
Ρύθμιση διαφορετικών στιγμιοτύπων για τους σύνδεσμους:
a.ex1:hover, a.ex1:active { color: red; } a.ex2:hover, a.ex2:active { font-size: 150%; }
Παράδειγμα 5
Ανάπνευση στο στοιχείο <span> για να εμφανιστεί το στοιχείο <div> (όπως μια εργαλειοθήκη):
div { display: none; } span:hover + div { display: block; }
Παράδειγμα 6
Εμφάνιση και κρυφή της μενού "κατεβασμός" όταν είναι επιλεγμένο με το ποντίκι:
ul { display: inline; margin: 0; padding: 0; } ul li {display: inline-block;} ul li:hover {background: #555;} ul li:hover ul {display: block;} ul li ul { position: absolute; width: 200px; display: none; } ul li ul li { background: #555; display: block; } ul li ul li a {display:block !important;} ul li ul li:hover {background: #666;}
Γλώσσα CSS
:hover { declarations css; }
Τεχνικά λεπτομέρειες
Έκδοση: | CSS1 |
---|
Υποστήριξη προγράμματος περιήγησης
Τα αριθμήματα στη στήλη πίνακα καθορίζουν την πρώτη έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως την ψευδοκλάση.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
4.0 | 7.0 | 2.0 | 3.1 | 9.6 |
Σελίδες σχετικές
Εκμάθηση:CSS σύνδεσμοι
Εκμάθηση:CSS ψευδοκλάσεις
- τη προηγούμενη σελίδα :has()
- Επόμενη σελίδα :in-range
- Επιστροφή στο προηγούμενο επίπεδο Εγχειρίδιο αναφορών ψευδοτύπων CSS