Arayüzlerde hover: nedir, efekt türleri ve uygulama

Web tasarımında hover nedir

Hover (İngilizce “to hover” kelimesinden) — fare imleci bir öğenin üzerindeyken arayüz öğesinin görsel tepkisidir. Terim, hem CSS :hover sınıfını hem de fare üzere geldiğinde öğenin durumunu ifade etmek için kullanılır.

Hover kavramı, Xerox Alto’nun (1973) ilk grafik arayüzlerinde ortaya çıkmış ve 1998’de CSS2’nin tanıtılmasıyla web’de standartlaştırılmıştır. O zamandan beri hover, masaüstünde kullanıcı deneyiminin ayrılmaz bir parçası haline gelmiştir.

CSS Usage Statistics (2025)’e göre, ilk 1000’deki sitelerin %94’ü en az bir öğe için :hover sınıfını kullanır. Hover en yaygın olarak düğmelere (%89), bağlantılara (%85) ve kartlara (%62) uygulanır.

Hover ve diğer durumlar arasındaki fark

Hover ≠ active. :hover fare üzere geldiğinde etkinleşir, :active tıklama anında etkinleşir. :focus, klavye aracılığıyla odak alındığında etkinleşir. Her durumun kendi amacı vardır. Hover bir önizleme, active bir eylem onayıdır.

CSS’de :hover sınıfı

CSS’deki :hover sınıfı, kullanıcı fare imlecini bir öğenin üzerine getirdiğinde öğeye stiller uygular. Herhangi bir HTML öğesiyle çalışır ancak en yaygın olarak etkileşimli öğelerle kullanılır.

/* Basic hover implementation */
.button {
    background: #4A90D9;
    color: white;
    padding: 12px 24px;
    border: none;
    transition: all 0.3s ease;
}

.button:hover {
    background: #357ABD;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74,144,217,0.4);
}

:hover seçicisinin özgünlüğü bir sınıf (0,1,0) ile aynıdır. Belirli bir öğe için hoverı geçersiz kılmanız gerekiyorsa, daha yüksek özgünlüğe sahip bir seçici kullanın. Bildirim sırası önemlidir: :hover, :focus’tan sonra bildirilirse, odakta hover çalışmayabilir.

Birleşik sınıflar

:hover diğer sınıflarla birleştirilebilir karmaşık mantık oluşturmak için. Örneğin, .card:hover .card__title, tüm kartın üzerine gelindiğinde kart içindeki başlık stilini değiştirir. Bu, iç içe animasyonlu efektler oluşturmaya olanak tanır.

Hover efekt türleri

Hover efektleri, değiştirilen özelliğin türüne göre kategorize edilir. Her tür farklı senaryolar için uygundur ve kullanıcıda belirli bir his yaratır.

En etkili tür, renk ve gölge efektlerinin birleşimidir. Material Design, ana hover geri bildirim türü olarak yükseklik değişikliğini (gölge yüksekliği değişimi) kullanmayı önerir.

Google Material Design (2024)’e göre, bir hover efekti fark edilebilir ancak dikkat dağıtıcı olmamalıdır. Önerilen animasyon süresi 200–300 milisaniyedir. Çok hızlı efektler (100 ms’nin altında) fark edilmeyebilirken, çok yavaş efektler (500 ms’nin üzerinde) kullanıcıyı rahatsız eder.

Pürüzsüz efektler için CSS geçişleri

CSS transition özelliği, özellik değişikliklerini zaman içinde canlandırarak hover efektlerini pürüzsüz hale getirir. Transition olmadan, hover anında tetiklenir ve bu da sarsıntılı ve göze hoş görünmez.

/* Different transitions per property */
.card {
    transition:
        box-shadow 0.3s ease-out,
        transform 0.2s ease-out,
        background 0.15s linear;
}

.card:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    transform: translateY(-4px);
}

Transition süresi bağlama göre değişir. Küçük öğeler (simge, bağlantı) için — 150–200 ms. Büyük öğeler (kart, modal) için — 250–350 ms. Easing işlevi ease-out, animasyonu sonunda yumuşak bir şekilde yavaşlatarak doğal bir his yaratır.

Önerilen uygulama — her canlandırılan özellik için ayrı ayrı transition belirtin. all özelliği geliştirme sırasında kullanışlıdır, ancak üretimde beklenmeyen efektlerden kaçınmak için animasyon için belirli özellikler tanımlamak daha iyidir.

Dokunmatik cihazlarda hover

Dokunmatik cihazlarda, hover kavramı mevcut değildir: bir öğenin üzerine gelebilecek bir imleç yoktur. Bir öğeye dokunmak, hover durumunu atlayarak hemen bir tıklamayı tetikler. Arayüz yalnızca hover’a dayanıyorsa bu sorun yaratır.

StatCounter (2026)’ya göre, küresel web trafiğinin %62’si mobil cihazlardan gelmektedir. Dokunmatik ekranlarda hoverın olmamasını görmezden gelmek, kullanıcıların çoğunluğu için UX kontrolünü kaybetmek anlamına gelir.

/* Disable hover on touch devices */
@media (hover: none) and (pointer: coarse) {
    .button:hover {
        background: initial;
        transform: none;
    }
}

hover: none medya sorgusu, bir cihazın hoverı desteklemediğini tespit etmeyi sağlar. Bu tür cihazlarda hover efektleri devre dışı bırakılır ve etkileşim :active ve :focus durumlarına dayanır. Alternatif bir çözüm, dokunulduğunda hover içeriğini göstermektir (ilk dokunuş hoverı gösterir, ikinci dokunuş eylemi gerçekleştirir), ancak bu desen UX’i kötüleştirir.

Hover efektlerinin erişilebilirliği

Hover erişilebilirliği genellikle gözden kaçırılan kritik bir husustur. Arayüzde klavyeyle gezinan kullanıcılar :hover’ı etkinleştiremez. Yalnızca hover aracılığıyla kullanılabilen özellikler onlar için erişilemez hale gelir.

WCAG 2.2 Kuralı (Başarı Kriteri 1.4.13 — Fare Üzerine Gelindiğinde veya Odaklandığında İçerik): fare üzerine gelindiğinde görünen içerik, odaklanıldığında da kullanılabilir olmalıdır. Hover ek bilgi (araç ipucu, açılır menü) gösteriyorsa, aynı bilgi :focus’ta da kullanılabilir olmalıdır.

/* Hover + focus for accessibility */
.tooltip-trigger:hover .tooltip,
.tooltip-trigger:focus .tooltip {
    opacity: 1;
    visibility: visible;
}

/* Disable animation for vestibular disorder */
@media (prefers-reduced-motion: reduce) {
    *:hover {
        transition: none;
    }
}

prefers-reduced-motion medya sorgusu — kullanıcının sistem ayarlarına saygı gösterin. Kullanıcı sisteminde animasyonu devre dışı bıraktıysa, hover efektleri transition olmadan anında uygulanmalıdır. Bu, vestibüler bozukluğu olan kişilere yardımcı olur.

Ek öneriler: kritik işlevler için hover kullanmayın, fare üzerine geldiğinde bilgi iletmek için yalnızca renge güvenmeyin (bir simge veya metin ekleyin) ve hover durumları için yeterli kontrast sağlayın.