:hover ve :focus

:hover ve :focus sözde sınıflarını öğrenirsin.

:hover nedir?

Bir sözde sınıf (pseudo-class), bir öğenin belirli bir durumunu yakalar. En bilineni :hover'dır: fare işaretçisi bir öğenin üzerine geldiğinde devreye girer.

Örneğin bir menü bağlantısında a:hover { color: red; } yazarsan, kullanıcı fareyi bağlantının üstüne götürdüğü an yazı kırmızı olur. Fare çekilince stil kaybolur. Böylece sayfa kullanıcıya anlık geri bildirim verir.

:focus nedir?

:focus, bir öğe o anda odaktayken eşleşir. Klavyeyle bir input alanına geçtiğinde ya da bir bağlantıya sekme tuşuyla ulaştığında o öğe odaklanır.

Odak halini görselleştirmek erişilebilirlik için şarttır: klavye kullananlar nerede olduklarını görmelidir. input:focus { outline: 2px solid #0066cc; } yazarsan, odaktaki alan belirgin bir çerçeve alır.

Bağlantıların etkileşim durumları

Bir bağlantının yaşamı boyunca birden çok etkileşim durumu (interaction state) vardır. CSS bunların her biri için ayrı sözde sınıf tanır:

:link — henüz ziyaret edilmemiş
:visited — ziyaret edilmiş
:hover — fare üzerinde
:active — tıklanma anı
:focus — klavyeyle odaklanmış

Yazım sırası önemlidir; LVHA sırası (link, visited, hover, active) çakışmaları temiz tutar.

Uygulama Bağlantı ve giriş alanı için etkileşim stili yaz

Bir a:hover seçicisi yaz ve içine color: darkred ekle. Ardından bir input:focus seçicisi yaz ve içine outline: 2px solid #0066cc ekle. İki bildirim de kendi { } bloğunda olsun.

Örnek çözümü göster

/* bağlantı ve giriş alanı stillerini ekle */
a:hover {
  color: darkred;
}
input:focus {
  outline: 2px solid #0066cc;
}

Kendini test et

:hover sözde sınıfı ne zaman devreye girer?
```
a:hover {
  color: darkred;
  text-decoration: underline;
}
```
- Bağlantı tıklandığı an
- Fare işaretçisi bağlantının üzerine geldiğinde
- Sayfa yüklendiği anda
- Bağlantı ziyaret edildikten sonra
Cevabı göster

Fare işaretçisi bağlantının üzerine geldiğinde — Doğru. :hover, fare işaretçisi öğenin üzerindeyken eşleşir.

Odak halindeki bağlantı seçicisini tamamla

a____ {
  outline: 2px solid #0066cc;
}

Cevabı göster

a:focus {
  outline: 2px solid #0066cc;
}

Sözde sınıfı durumla eşleştir

:hover

Fare üzerinde
:focus

Klavyeyle odaklanmış
:visited

Ziyaret edilmiş
:active

Tıklanma anı

Sıradaki ders: :nth-child

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler