Pseudo-kelas :hover CSS

Definisi dan penggunaan

CSS :hover Pseudo-kelas digunakan untuk memilih elemen semasa kursor menempatkan diri.

Petikan::hover Pseudo-kelas boleh digunakan untuk semua elemen, bukan hanya pautan.

Petikan:Sila gunakan :link Tetapkan gaya untuk pautan halaman yang belum dihantar, gunakan :visited Tetapkan gaya untuk pautan halaman yang telah dihantar, gunakan :active Tetapkan gaya untuk pautan aktif.

Perhatian:dalam definisi CSS,:hover mesti diletakkan :link dan :visited(jika ada) sebelum ia berkuasa!

Contoh

Contoh 1

Pilih dan tetapkan gaya untuk pautan semasa kursor menempatkan diri:

a:hover {
  background-color: yellow;
  font-size: 18px;
}

Coba sendiri

Contoh 2

Pilih dan tetapkan gaya untuk elemen <p>, <h1> dan <a> semasa kursor menempatkan diri:

p:hover, h1:hover, a:hover {
  background-color: yellow;
}

Coba sendiri

Contoh 3

Pilih dan tetapkan gaya untuk link yang belum diakses, yang telah diakses, yang diantara kura-kura, dan yang aktif:

/* Link yang belum diakses */
a:link {
  color: green;
}
/* Link yang telah diakses */
a:visited {
  color: green;
}
/* Link yang diantara kura-kura saat disentuh */
a:hover {
  color: red;
}
/* Link yang aktif */
a:active {
  color: yellow;
}

Coba sendiri

Contoh 4

Tetapkan gaya berbeda untuk link:

a.ex1:hover, a.ex1:active {
  color: red;
}
a.ex2:hover, a.ex2:active {
  font-size: 150%;
}

Coba sendiri

Contoh 5

Tahan di atas elemen <span> untuk menampilkan elemen <div> (seperti alat tip):

div {
  display: none;
}
span:hover + div {
  display: block;
}

Coba sendiri

Contoh 6

Tampilkan dan sembunyikan menu 'turun' saat diantara kura-kura:

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;}

Coba sendiri

CSS Grammar

:hover {
  deklarasi css;
}

Detil teknologi

Dukungan browser

Angka di dalam tabel menunjukkan versi pertama penggunaan browser yang mendukung pseudo-class ini sepenuhnya.

Halaman berkaitan

TutoriCSS Link

TutoriCSS Pseudo-class