CSS ile Hover Özelliğini kullanma

Daha önce temel HTML bilgisine sahip olduğunuzu farz ediyorum. Aşağıdaki satırları Notepad++ ya da Sublime gibi bir metin editörü kullanarak yazabilirsiniz.

İlk önce 300px genişliğinde ve 200px yüksekliğinde bir kutu oluşturuyoruz. float:left ile de sola hizalıyoruz. 

.kutu1{
       width:300px;
       height:200px;
       background: red;
       float:left;
} 

Bundan sonra kutunun üzerine gelince renk değiştirmesi için hover özelliğinden yararlanıyoruz.


.kutu1:hover{background: black;}

Yukarıdaki kod satırı ile kutu1 nesnesinin üzerine gelince renginin siyah olmasını sağlayan css div kodunu görüyorsunuz.  Bu işlemlerin aynısını kutu2 isimli div class'ı için de yapıyoruz. 

.kutu2{
    width:300px;
    height:200px;
    background: green;
    float:left;
}

.kutu2:hover{background: black;}

Kutu2 class'ının arka zemin rengini yeşil yaptık, diğer özellikleri kutu1 ile aynı. Şimdi kodların tamamını ve çalışmasını görelim.



index.html sayfası içeriği

<html>
<head>
<title>CSS Ornek1</title>

<style>
 
.kutu1{
       width:300px;
       height:200px;
       background: red;
       float:left;
}
 
.kutu1:hover{background: black;}

.kutu2{
    width:300px;
    height:200px;
    background: green;
    float:left;
}

.kutu2:hover{background: black;}

</style>
</head>
<body>

<div class="kutu1">
</div>
 
<div class="kutu2">
</div>
 
</body>
</html>

========================

Fare ile kırmızı kısmın üzerine gelince aşağıdaki gibi görünecektir, kırmızı kısım siyaha bürünecektir.



Mutlu kodlamalar,
Oğuzhan TAŞ
Ocak 2017
 
Bookmark and Share
Dil Değiştir(Change Language)
Kategoriler
Kütüphane Programı
En çok Okunan 18 Makale