: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ı