Ψευδαισθήκη :hover 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 ψευδοκλάσεις