CSS'te Bağlantı Durumları

İnternette çeşitli web sitelerini ziyaret ederken, bağlantıların genellikle fareyle üzerlerine gelindiğinde tepki verdiğini fark etmişsinizdir. Bu efekti, bağlantıların çeşitli durumlardaki davranışlarını belirleyerek elde edebilirsiniz.

Örneğin, bu şekilde - a:hover - bir bağlantının üzerine fare imleci getirildiği durumu yakalarız. Bu anda, örneğin bağlantının rengini değiştirebilir veya alt çizgisini kaldırabilir/ekleyebiliriz. :hover yapısına sözde sınıf denir. Sözde sınıflar, öğelerin farklı durumlarını yakalamayı sağlar.

:hover'a ek olarak, ziyaret edilmemiş bağlantıyı yakalayan :link ve ziyaret edilmiş bağlantıyı yakalayan :visited sözde sınıfları da vardır. Bazı web sitelerinde, kullanıcılara nerede bulunduklarını ve nerede bulunmadıklarını göstermek için bunlar kullanılır. Bir de şu durumu yakalayan :active sözde sınıfı vardır: öğeye fareyle tıklandı ama henüz bırakılmadı.

Aşağıdaki örnekte, :hover durumundaki bir bağlantının alt çizgisi kaldırılıyor, :link durumunda kırmızı renk, :visited durumunda yeşil, :active durumunda ise mavi renk veriliyor. Sonuç olarak, bağlantı başlangıçta kırmızı renkte olacak, üzerine tıklandıktan sonra yeşil, üzerine fareyle tıklanıp bırakılmazsa mavi olacak ve fare üzerine getirilirse altı çizili olmayacaktır:

a:link {
	color: red;
}
a:visited {
	color: green;
}
a:hover {
	text-decoration: none;
}
a:active {
	color: blue;
}

<a href="#">link</a>