:hover, :focus ve :active kardeşler

Css hover, focus ve active selector (seçiciler) kullanımı, ayarlanması bazıları için biraz kafa karıştırıcı olsa da  aslında çok basit  olan elementlerdir. Bir gün bu tarz bir yazı anlatacağım hiç aklıma gelmezdi ancak bir defasında buna benzer basit bir yöntem için forumlardan birinde ücretli destek talebi açıldığını  ve üç kağıtçıların dadandığı görünce  ister istemez bilmeyenleri aydınlatmak için bu konuyu anlatmaya karar verdim. Kişinin tam olarak istediği yardım bu değildi ama bu elementlerden bir tanesinin ismini kullanarak konu açmıştı. Bu her üç elementin görevi mousenin davranışlarına göre hareket etmektir. Mouse üzerine gelince, mouse ile basılı tutunca ve mouse ile tıklayınca. Mouse herhangi bir nesnenin (resim, yazı, link, çerçeve vs.) üzerine geldiğinde değişmesini istiyorsak belirlediğimiz herhangi bir sınıfıa :hover ekleriz, basılı tutulduğunda :active ve tıklandığında ise :focus elementini kullanırız. Focus kullanım açısından çok geniş bir yelpazeye sahip değildir, ya input alanları ya da textarea alanları için kullanılır. Bazı sitelerde giriş formlarına tıkladığınızda input alanının renginin değiştiğini görmüşsünüzdür. Tıklandığında farklı bir görüntü sağlayan :focus elementidir. Active elementine gelince çoğu kişi bunun ne işe yaradığını karıştırır. Bazı web sitelerinde menü linklerine tıkladığınızda ve link sayfası açıldığında menü üzerinden o sayfanın linki diğerlerinden farklı görünür. Bunun yapılışı :active elementi ile değildir. Bunu yapmak için Css ile başka bir sınıf hazırlayıp mouse üzerine geldiğinde kullanılan değerleri aynen bu sınıf içine eklememiz gerekiyor. Daha önceleri bunun gibi bir kaç tane menü örneği hazırlayıp yayınlamıştım sitede. Örnek olarak buradaki şeffaf menü örneğini inceleyebilirsiniz. Daha iyi açıklamak için jsfiddle üzerinden Html a etiketi  ile bir kaç tane basit demo hazırladım.

Css :hover kullanımı:

Bildiğiniz üzere a etiketi linkler için kullanılır. Hazır a etiketinden bahsetmişken Html5 ile gelen yeni bir özellikten de bahsetmekte fayda var sanırım. Bunu da yazının sonunda anlatmak karışıklık olmasın diye daha mantıklı olur bence. :hover result sekmesine tıklayarak sonucu görebilirsiniz. Mouse linkin üzerine geldiği an yazının rengi değişecek.

Css :active kullanımı:

active yine buradada result sekmesine tıklayarak sonuca bakabilirsiniz. Linke tıkladığınızda rengi değişecek. Mouseyi basılı tuttuğunuz sürece içerisinde eski haline dönmez.

Css :focus kullanımı:

:focus örneğinde input alanını tıkladığınızda  doğrusu arkaplan  pembe olacak. :focus için son olarak textarea elementi için de bir tane örnek ekledim. Textarea içine tıkladığınızda yine arkaplan rengi pembe olacak ve textarea içindeki yazı da sarı renkli olacak. Bu üç kardeş hakkında anlatacaklarım bu kadar. Bunları herhangi bir Html etiketi ile yada çerçevelerde kullanabilirsiniz. Yapmanız gereken bu değerleri uygulamak istediğiniz nesneyi doğru seçmek. Mesela bir menü hazırlarsınız ve mouse linkerin üstüne geldiğinde linkin rengi değişir ama butonun değişmez. Bunun için de menüde belirlediğiniz nesnelere de bu kardeşlerden bir tanesini eklemeniz gerekmekte. Son olarak yazının ortasında aklıma gelen Html5 ile a etiketine vurgulanan bir özellikten bahsetmek istiyorum sizlere. Bu özelliğin adı download.  A etiketlerini <a></a> şeklinde açar ve kapatırız. Download özelliğini eklediğimizde ise <a download></a> şeklinde açıp kapatıyoruz. Bu şekilde yaptığımız zaman a harfleri arasına eklenen nesnelere tıklandığında o nesneleri bilgisayarımıza indirebiliyoruz. Örnek olarak bir resim ekledim ve resme tıkladığınızda bilgisayarınıza inecek. <a download> kullanımı Not: Download özelliği IE, Safari üzerinde ve Operanın 12. sürümünden önceki tarayıcılar tarafından desteklenmiyor.