Pseudo-kelas :hover CSS

Definisi dan penggunaan

CSS :hover Pseudo-kelas digunakan untuk memilih elemen saat mouse berada di atasnya.

Petunjuk::hover Pseudo-kelas dapat digunakan untuk semua elemen, bukan hanya tautan.

Petunjuk:Gunakan :link Atur gaya tautan halaman yang belum diakses, menggunakan :visited Atur gaya tautan halaman yang telah diakses, menggunakan :active Atur gaya tautan yang aktif.

Perhatian:Dalam definisi CSS,:hover harus ditempatkan :link dan :visited(! apabila ada) sebelum berlaku!

Contoh

Contoh 1

Pilih dan atur gaya tautan saat mouse berada di atasnya:

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

Coba sendiri

Contoh 2

Pilih dan atur gaya elemen <p>, <h1> dan <a> saat mouse berada di atasnya:

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

Coba sendiri

Contoh 3

Pilih dan atur gaya untuk tautan yang belum diakses, yang telah diakses, yang diarahkan mouse, dan yang aktif:

/* Tautan yang belum diakses */
a:link {
  color: green;
}
/* Tautan yang telah diakses */
a:visited {
  color: green;
}
/* Tautan yang diarahkan mouse */
a:hover {
  color: red;
}
/* Tautan yang aktif */
a:active {
  color: yellow;
}

Coba sendiri

Contoh 4

Atur gaya yang berbeda untuk tautan:

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

Coba sendiri

Contoh 5

Tahan mouse di atas elemen <span> untuk menampilkan elemen <div> (seperti tooltip):

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

Coba sendiri

Contoh 6

Tampilkan dan sembunyikan menu 'turun' saat mouse berada di atasnya:

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

Syarat CSS

:hover {
  deklarasi css;
}

Detil teknis

Dukungan browser

Angka di tabel menunjukkan versi browser pertama yang mendukung pseudo-kelas ini penuh.

Halaman terkait

Tutorial:Tautan CSS

Tutorial:Pseudo-kelas CSS