Hover satırı
:hover ile satır hover efektini öğrenirsin.
Hover satırı nedir?
Bir hover satırı, fare ile üzerine gelinen satırın arka planının değişmesidir. CSS'te tr:hover seçicisi kullanılır. Örnek: tr:hover { background: #e0e7ff; }.
Bu efekt, kullanıcının hangi satıra baktığını netleştirir; özellikle geniş tablolarda faydalıdır. Satır üzerinde gezinirken göz, takip ettiği veriyi kaybetmez. Renk çok koyu olmamalı; okuma zorlaşır.
Hover'a geçiş ekle
Hover efektini yumuşak geçişli yapmak için transition özelliğini kullanırsın. Önce tr'ye geçiş tanımlarsın, sonra tr:hover'da arka planı değiştirirsin.
Örnek: tr { transition: background 0.2s; } ve tr:hover { background: #e0e7ff; }. Renk aniden değil, 0.2 saniyede geçiş yapar; bu küçük dokunuş tabloyu daha profesyonel gösterir.
Uygulama Stok listesine hover satırı ekle
Bir .stok sınıflı tabloya hover satırı ekle: .stok tr:hover seçicisine background: #e0e7ff; yaz. Ayrıca .stok tr seçicisine transition: background 0.2s; ekle.
Örnek çözümü göster
.stok tr seçicisi aç, içine transition: background 0.2s; yaz. Sonra .stok tr:hover seçicisi aç, içine background: #e0e7ff; yaz.
Örnek çözüm:
.stok tr {
transition: background 0.2s;
}
.stok tr:hover {
background: #e0e7ff;
}Kendini test et
-
Hangi seçici fareyle üzerine gelinen satırı seçer?
/* ? seçici üzerine gelinen satırı boyar */- tr:hover
- tr:active
- tr:hovered
- tr:focus
Cevabı göster
tr:hover — Doğru! tr:hover fareyle üzerine gelinen satırı seçer.
-
Hover seçicisi
____ { background: #e0e7ff; }Cevabı göster
tr:hover { background: #e0e7ff; } -
Hover kavramlarını eşleştir
- tr:hover
- fareyle üzerine gelince
- tr:nth-child(even)
- çift satırlar
- transition
- yumuşak geçiş
- background
- arka plan rengi