SVG hover efektleri

SVG öğelerine hover efektleri eklersin.

SVG üzerinde hover

SVG öğeleri normal HTML öğeleri gibi :hover sözde sınıfıyla (pseudo-class) yanıt verir. Fareyi bir ikonun üstüne getirdiğinde rengi değişebilir, çizgisi kalınlaşabilir.

Bunu yapmanın iki yolu vardır: doğrudan .icon:hover ile tüm SVG'yi ya da .icon:hover circle ile yalnızca bir iç öğeyi hedefleyebilirsin. İkincisi, birden çok parçalı karmaşık ikonlarda işe yarar.

Hover'da fill değişimi

En sık kullanılan hover efekti, ikonun iç rengini değiştirmektir. Fare üzerindeyken fill özelliğini yeniden yazarsın.

Örnek: .btn svg { fill: #94a3b8 } ile ikon gri başlar; .btn:hover svg { fill: #2563eb } ile fare üzerindeyken maviye döner. Bu küçük dokunuş, düğmenin canlı hissettirir.

Uygulama Hover'da ikonu maviye çevir

.icon:hover seçicisi içine bir fill bildirimi ekle ve değerini #2563eb yap. Böylece fare ikon üzerindeyken iç renk maviye döner.

Örnek çözümü göster

.icon:hover seçicisini aç, içine fill: #2563eb; yaz.
Örnek çözüm:
.icon:hover {
  fill: #2563eb;
}

Kendini test et

Hover efekti hangi sözde sınıfla yapılır?
- :active
- :focus
- :hover
- :checked
Cevabı göster

:hover — Doğru! :hover fare öğenin üzerindeyken eşleşir.

Hover'da kenar rengini değiştir

.icon:hover {
  ____: #dc2626;
}

Cevabı göster

.icon:hover {
  stroke: #dc2626;
}

Hangisi doğru hover bildirisidir?
- .icon hover { fill: #2563eb }
- .icon::hover { fill: #2563eb }
- .icon:hover fill: #2563eb
- .icon:hover { fill: #2563eb }
Cevabı göster

.icon:hover { fill: #2563eb } — Doğru! :hover tek iki nokta ile yazılır; bildirim süslü parantez içinde olmalı.

Sıradaki ders: CurrentColor

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler