Hover ve geçiş efektleri

Başlamadan önce

Önceki dersteki örneği çalıştırmış olman ve dosya/çıktı ayrımını biliyor olman yararlı.

Öğrenme sırası: konuyu oku → çıktıyı tahmin et → örneği değiştir → alıştırmayı çöz → cevabını gerekçelendir.

Konu anlatımı

Hover fareyle bir öğenin üzerine gelindiğinde eşleşir. Telefonda kalıcı bir fare işaretçisi olmadığı için önemli bilgi veya işlem yalnızca hover durumunda ortaya çıkmamalıdır. Bir düğmenin normal hâli zaten anlaşılır olmalı; hover yalnızca etkileşimi desteklemelidir. Klavye için focus-visible durumunu ayrıca düşün.

Transition bir özelliğin eski değerden yeni değere geçişini zamana yayar. “all” yazmak beklemediğin özellikleri de hareketlendirebilir; hangi özelliklerin değişeceğini açıkça listelemek daha kontrollüdür. Kısa ve amaçlı bir renk geçişi, her öğenin hareket etmesinden daha yararlı olabilir.

Bazı kullanıcılar cihazlarında hareketi azaltmayı seçer. prefers-reduced-motion koşuluyla zorunlu olmayan hareketi kapat. Animasyonların bilgiye erişim için şart olmaması, tasarımın hareket olmadan da çalışması gerektiğini gösterir. Hareketi işlev yerine dekorasyon olarak kullanıp dikkati dağıtma.

İlk örneği oku ve dene

<style>
  .buton {
    background-color: #6366f1;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    transition: transform 0.2s, background-color 0.2s;
  }
  .buton:hover {
    background-color: #4338ca;
    transform: scale(1.1);
  }
</style>

<button class="buton">Üzerime gel</button>

Mor bir buton görünür; fareyle üzerine gelince koyulaşır ve hafifçe büyür.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Adım adım neden böyle çalışıyor?

1. hover bir işaretçi durumudur; tek erişim yolu olarak tasarlanmaz.
2. focus-visible klavye odağını görünür kılar.
3. transition-property değişecek özelliği sınırlar.
4. prefers-reduced-motion kullanıcı tercihine saygı göstermeyi sağlar.

<style>
.dugme{padding:12px 18px;background:#eef2ff;border:1px solid #64748b;transition:background-color .15s}
.dugme:hover{background:#c7d2fe}.dugme:focus-visible{outline:3px solid #245f9e;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.dugme{transition:none}}
</style>
<button class="dugme">Kaydet</button>

Fare üzerine gelince rengi değişen, klavyeyle odaklanınca belirgin çerçevesi olan düğme.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Kolaydan zora sen dene

1. Yalnızca background-color için kısa geçiş ekle.
2. Fare kullanmadan Tab ile düğmeye ulaş.
3. Hareket azaltma tercihini aç ve geçişin kapandığını doğrula.

<style>a{color:#245f9e;text-decoration:underline}a:focus-visible{outline:2px solid currentColor;outline-offset:4px}</style>
<a href="#sonuc">Sonuç bölümüne git</a><p id="sonuc">Hedef burası.</p>

Altı çizili ve klavye odağı görünen bağlantı.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Yaygın hata ve çözümü

1. outline:none verip yerine görünür odak eklememek klavye kullanıcısını kaybettirir.
2. Hover ile açılan tek düğmeyi telefonda kullanıcı bulamayabilir; normal görünümde erişilebilir bırak.

Kendini değerlendir

Ezberlemeden açıklayabiliyor musun?

Hover neden tek başına yeterli etkileşim göstergesi değildir?

Kendi çözümünde bir girdiyi değiştir. Çalıştırmadan önce beklenen sonucu yaz; gerçek sonuçla karşılaştır ve fark varsa hangi satırdan kaynaklandığını açıkla.

Kaynak ve çalışma ortamı

Örnekler küçük öğretim senaryolarıdır. Java/C#/PHP/Swift çalışma ortamını kendi cihazında ayrıca doğrula; yazılı sonuçlar beklenen davranışı açıklar.