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

Sıradaki ders: Özet - Veri tablosu

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler