• Bu site çerezler kullanır. Bu siteyi kullanmaya devam ederek çerez kullanımımızı kabul etmiş olursunuz. Daha fazla bilgi edin.

CSS Hover Özelliği [Ders]

Konuyu Okuyan Kişiler (0)

enescakmak

webmaster.tc
Katılım
20 Ağu 2012
Mesajlar
32
Beğeniler
0
#1
Merhaba arkadaşlar. Foruma katılım şerefiyle CSS hakkında ki yazılarımı yazmaya başlayayım istedim. Umarım yararlı olurum. :)

Öncelikle CSS Hover nedir onu öğrenelim. Hover özelliği sayesinde HTML belgenizde yer alan bir resmin veya yazının fare ile üstüne gelince, bir başka şekil çıkmasını sağlayabilirsiniz. Bir örnek vermek gerekirse;

Sitenizde bulunan logonun üzerine gelince logonun soluk olmasını istiyorsunuz. İşte bu solukluğu hover özelliği ile kolayca yapabilirsiniz.

Benim çok sevdiğim bir özelliktir, eminim sizde seveceksiniz :)

Nasıl kullanılır?

Hover özelliğini vermek istediğimiz <div></div> için style.css dosyamızda .divadi:hover şeklinde bir özellik belirtiyoruz. Örnek;

Kod:
.logo       {background-image: url(../images/logo.png); }
Kod:
.logo:hover     {background-image: url(..logonun üstüne gelince çıkacak resim); }
Üstteki örnekte yaptığımız işlem, logonun üzerine fare ile geldiğiniz zaman belirleyeceğiniz bir başka resmin çıkmasını sağlamaktır. Eğer logoyu soluk yapmak isterseniz de;

Kod:
.logo    {background-image: url(../images/logo.png); }
Kod:
.logo:hover    {opacity: 0.4}
Opacity ayarı sayesinde resmin şeffaflığını çoğaltıp arttırabiliriz.