CSS :hover Sözde Sınıfı

Tanımlama ve Kullanım

CSS :hover Sözde sınıflar fare üzerindeyken element seçmek için kullanılır。

İpucu：:hover Sözde sınıflar tüm elementler için kullanılabilir, sadece bağlantılar için değil.

İpucu：Kullanın :link Ziyaret edilmemiş sayfanın bağlantı tarzını ayarlamak için kullanın :visited Ziyaret edilmiş sayfanın bağlantı tarzını ayarlamak için kullanın :active Aktif bağlantı tarzını ayarlayın。

Dikkat:CSS tanımlarında,:hover zorunludur :link ve :visited！(Varsa) etkili hale gelir!

Örnek

Örnek 1

Fareketin üzerine gelme anında bağlantı tarzını seçin ve ayarlayın：

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

Kişisel olarak deneyin

Örnek 2

Fareketin üzerine gelme anında <p>、<h1> ve <a> elementlerinin tarzını seçin ve ayarlayın：

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

Kişisel olarak deneyin

Örnek 3

Ziyaret edilmemiş, ziyaret edilmiş, fare ile üzerine gelinen ve aktif bağlantı stillerini seçin ve ayarlayın:

/* Ziyaret edilmemiş bağlantı */
a:link {
  color: green;
}
/* Ziyaret edilen bağlantı */
a:visited {
  color: green;
}
/* Fare ile üzerine gelinen bağlantı */
a:hover {
  color: red;
}
/* Aktif bağlantı */
a:active {
  color: yellow;
}

Kişisel olarak deneyin

Örnek 4

Bağlantılara farklı stiller ayarlayın:

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

Kişisel olarak deneyin

Örnek 5

Fare ile <span> elementi üzerine gelin ve <div> elementini göster (benzer bir araç ipucu):

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

Kişisel olarak deneyin

Örnek 6

Fare ile üzerine gelindiğinde 'Açılır Menü' göster ve gizle:

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

Kişisel olarak deneyin

CSS Dilbilgisi

:hover {
  css declarations;
}

Teknik Ayrıntılar

Tarayıcı Desteği

Tabloda belirtilen rakamlar, bu sahte sınıfın tamamen desteklenen ilk tarayıcı sürümünü belirtir.

İlgili Sayfalar

Tutorial:CSS Bağlantıları

Tutorial:CSS Sahte Sınıflar