Bağlantı durumları

:link, :visited, :hover, :active durumlarını öğrenirsin.

Bağlantının dört hali

Bir a bağlantısı birkaç durumda bulunur: henüz ziyaret edilmemiş, ziyaret edilmiş, fareyle üzerine gelinmiş, tıklanıyor. CSS her duruma ayrı stil vermen için sahte sınıflar (pseudo-classes) sunar.

Sahte sınıf, seçicinin başına iki nokta ile eklenir: a:link, a:visited, a:hover, a:active. Böylece aynı bağlantı, duruma göre farklı biçimlerde görünebilir ve ziyaretçi hangi bağlantıya tıklayabileceğini anında anlar.

:link ve :visited

:link henüz ziyaret edilmemiş bağlantıları, :visited daha önce tıklanmış bağlantıları eşleştirir. Tarayıcı geçmişi hatırladığı için ziyaret edilmiş bağlantılar genellikle farklı renge bürünür.

Örneğin a:link { color: steelblue; } ve a:visited { color: rebeccapurple; } yazarak bu iki durumu ayırt edebilirsin. Bu ayrım ziyaretçinin gezinmesini kolaylaştırır.

:hover ve :active

:hover fareyle üzerine gelinen bağlantıları, :active ise tıklanıp basılı tutulan anı yakalar. Birçok sitede :hover rengi değiştirir, :active ise hafif geri bildirim verir.

Sıra önemlidir: link → visited → hover → active (LVHA) sırasında yazmak çakışmayı önler. Ters sırada yazarsan sonraki durum öncekinin üzerine çıkar ve istediğin etki kaybolur.

Uygulama Üzerine gelince renk değiştir

Bir a:hover sahte sınıfı seçicisi yaz ve color: tomato tanımla. Böylece fareyle bağlantının üzerine gelindiğinde renk domates kırmızısına dönecek.

Örnek çözümü göster

/* üzerine gelince renk değişsin */
a:hover {
  color: tomato;
}

Kendini test et

Tıklama anı hangi sahte sınıf?
```
a:link { color: steelblue; }
a:hover { color: tomato; }
a:active { color: firebrick; }
```
- :link
- :visited
- :hover
- :active
Cevabı göster

:active — Doğru. :active sahte sınıfı tıklanıp basılı tutulan anı yakalar.

Üzerine gelme seçicisini yaz

____ {
  color: firebrick;
}

Cevabı göster

a:hover {
  color: firebrick;
}

Durumu anlamına eşle

:link

Henüz ziyaret edilmemiş
:visited

Daha önce tıklanmış
:hover

Fareyle üzerine gelinmiş
:active

Tıklanıp basılı

Sıradaki ders: Metin dekorasyonu kaldırma

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler