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ı