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)