:hover :focus :active ve :visited
Etkileşimli bağlantı ve düğme durumlarını en yaygın CSS sözde sınıflarını kullanarak biçimlendirin.
:hover :focus :active ve :visited, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.
Sözde Sınıflar Nedir?
Sözde sınıflar, öğeleri durumlarına veya diğer öğelerle ilişkilerine göre seçer. Tek bir iki noktayla : başlar ve HTML'ye öznitelik eklenmesini gerektirmez.
:hover
:hover, kullanıcının işaretçisi bir öğenin üzerindeyken uygulanır. En yaygın etkileşimli durum seçicisidir.
<p><a href="#" class="demo-hover">Hover this link</a></p>
<div class="card demo-hover">Hover this card</div>
:focus
:focus, bir öğe odak aldığında uygulanır (klavyedeki Sekme tuşu veya programatik odaklama yoluyla). Erişilebilirlik açısından kritik öneme sahiptir.
<input type="text" placeholder="Auto-focused input" autofocus />
<button>Click me (focus me too)</button>
:focus-visible
:focus-visible, :focus seçicisinin daha akıllı bir sürümüdür — odak halkasını yalnızca odak fareyle değil, klavyeyle alındığında gösterir. Böylece klavye kullanıcıları için odak göstergeleri sağlanırken fare tıklamalarında gereksiz halkalar gösterilmez.
<button autofocus>Keyboard-focused button shows a ring</button>
:focus-within
:focus-within, alt öğelerinden herhangi biri odaklandığında bir öğeye uygulanır. Etkin durumdaki form kapsayıcılarını veya arama çubuklarını biçimlendirmek için kullanışlıdır.
<form class="search-form"><input type="search" placeholder="Search…" autofocus /></form>
:active
:active, bir öğe etkinleştirilirken — fare tıklaması veya dokunma sırasında — uygulanır. Etkileşimli öğeler için görsel geri bildirim oluşturur.
<button class="demo-active">Pressed button (demo state)</button>
:visited
:visited, kullanıcının daha önce ziyaret ettiği bağlantıları biçimlendirir. Gizlilik kaygıları nedeniyle, :visited ile yalnızca sınırlı sayıda özellik biçimlendirilebilir (renk, arka plan rengi, kenarlık rengi, dış çizgi rengi).
<a href="#" class="demo-visited">Visited link</a>
Bağlantı Durumlarının Sırası (LVHA)
Dört bağlantı durumunun tümünü biçimlendirirken özgüllük sorunlarını önlemek için LVHA sırasını izleyin: L bağlantı, V ziyaret edilmiş, H üzerine gelme, A etkin.
<p><a href="#">Unvisited (link)</a></p>
<p><a href="#" class="demo-visited">Visited</a></p>
<p><a href="#" class="demo-hover">Hover</a></p>
<p><a href="#" class="demo-active">Active</a></p>
Dokunmatik Cihazlarda Üzerine Gelme
Dokunmatik ekranlarda, farelerdekiyle aynı şekilde bir üzerine gelme durumu bulunmaz. :hover, dokunma sırasında kısa süreliğine etkinleşebilir. Dokunmaya özgü etkileşimler için :active veya @media (hover: none) medya sorgusunu kullanın.
Durumları Birleştirme
Birden fazla durumu aynı anda biçimlendirmek için sözde sınıflar zincirlenebilir:
<a href="#" class="demo-visited-hover">Visited link being hovered</a>
<button>Click-focused button gets no ring</button>
Üzerine Gelme Durumlarına Geçiş Uygulama
Geçişin her iki yönde de çalışması için yumuşak üzerine gelme efektlerini :hover durumu yerine temel duruma geçişler ekleyerek oluşturun:
<button class="btn demo-hover">Hover transitions smoothly</button>
Hızlı Kontrol
Fare tıklamalarında değil, yalnızca klavye ile gezinmede odak stillerini gösteren sözde sınıf hangisidir?
Özet
:hover işaretçi bir öğenin üzerindeyken, :focus giriş odağı alındığında, :active tıklama sırasında, :visited ise ziyaret edilmiş bağlantılar için etkinleşir. Yalnızca klavye odak halkaları için :focus-visible kullanın. Bağlantı durumları için LVHA sırasını izleyin. Erişilebilirlik için her zaman görünür odak göstergeleri sağlayın.
Sıkça Sorulan Sorular
“:hover :focus :active ve :visited” dersi ücretsiz mi?
Evet — “:hover :focus :active ve :visited” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.
“:hover :focus :active ve :visited” dersinde ne öğreneceğim?
Etkileşimli bağlantı ve düğme durumlarını en yaygın CSS sözde sınıflarını kullanarak biçimlendirin. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“:hover :focus :active ve :visited” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- :hover :focus :active ve :visited
- :nth-child ve :nth-of-type
- :not() :is() ve :where()
- :checked :disabled ve Form Durumu Sözde Sınıfları