CSS Hover Özelliğinin Kullanımı- Takım Örneği

Bu yazımızda CSS Hover Özelliğini kullanarak takım örneği yapacağız. Div kullanımını, font parametrelerinin kullanımını da göreceğiz. kartal, kanarya ve aslan isimli üç tane class tanımlayacağız.

kartal isimli class'ta zemin rengi siyah, yazı rengi beyaz olacak. Bunun için aşağıdaki iki kod satırını kullanıyoruz.

background: #000; 
color:#FFF; 

galatasaray isimli class'ta zemin rengi kırmızı, yazı rengi sarı olacak. Bunun için aşağıdaki iki kod satırını kullanıyoruz.

background: red; 
color:yellow;

kanarya isimli class'ta zemin rengi mavi, yazı rengi sarı olacak. Bunun için aşağıdaki iki kod satırını kullanıyoruz.

background: blue; 
color:yellow;

Şeklimizin kare şeklinde olması için genişlik(width) ve yükseklik(height) değerini 200px tanımladık. Bunu aşağıdaki kod satırı ile yapıyoruz.

width:200px; 
height:200px;

Kullandığımız font tipinin Arial olmasını font-face ile, yazı büyüklüğünü font-size ile ayarlıyoruz. Fontumuzun kalın görünmesi için font-weight:bold; özelliğini kullanıyoruz.

Fareyi div üzerinde gezdirdiğimizde ise renklerin tersine dönmesini istiyoruz. Fare üzerine geldiğinde olacak değişklikler için hover özelliğini kullanıyoruz. Aşağıda kanarya isimli class'ta fareyi konumlandırımca zemin rengi larcivertden sarıya, yazı rengi de sarıdan larciverte dönüşmüş olacaktır.

.kanarya:hover{   
    background: yellow; 
    color:blue;
     font-size: 25px
}

Aşağıda tüm kodlarımızı görüyoruz. 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
 .kartal{ background: #000; 
       color:#FFF; 
       width:200px; 
       height:200px;
       text-align: center;
       float:left;
       font-size:20px;
       font-family: Arial;
       font-weight: bold;
  }
 .kartal:hover{ background: #FFF; color:#000; font-size: 25px}
 .kanarya{
  background: blue; 
      color:yellow;
       width:200px; 
       height:200px;
       text-align: center;
       float:left;
       font-size:20px;
       font-family: Arial;
       font-weight: bold;
    }
 .kanarya:hover{background: yellow;  color:blue;font-size: 25px}
 .aslan{background: red; 
      color:yellow;
      width:200px; 
      height:200px;
      text-align: center;
      float:left;
    font-size:20px;
  font-family: Arial;
      font-weight: bold;
  }
.aslan:hover{background: yellow;  color:red;font-size: 25px}
</style>
 
</head>
 
<body>
<div class="kartal">BEŞİKTAŞ</div>
<div class="kanarya">FENERBAHÇE</div>
<div class="aslan">GALATASARAY</div>
</body>
</html>


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