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.
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.
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;
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.
Ş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.
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.
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

Mutlu kodlamalar,
Oğuzhan TAŞ
Aralık, 2017

Dil Değiştir(Change Language)
Kategoriler
- Csharp(46)
- Csharp Formlar(9)
- Web Tasarım(10)
- CSS(22)
- JavaScript(28)
- PHP(46)
- Laravel(2)
- ASP.net(38)
- Excel(13)
- Güvenlik(4)
- E-Ticaret(3)
- Kariyer(4)
- SQL Server(24)
- MySQL(13)
- Linux(13)
- MacOSX(8)
- Ayarlar(11)
- Bilgisayar Ağları(3)
- Symfony(1)
- Teknoloji(7)
- VBS(1)
- Arduino(1)
- RaspberryPi(1)
- Algoritmalar(15)
- HTML(3)
En çok Okunan 23 Makale
- :: Cep Telefonu IMEI Numarasını Öğrenm...
- :: Hangi Linux Dağıtımı?
- :: OSX İşletim Sistemine PHP, MySQL, A...
- :: Csharp ile Access Veritabanı Bağlan...
- :: Hangi Programlama Dilini Öğrenmeliy...
- :: Hangisi acaba, PHP mi ASP.NET mi ?
- :: Excelde EĞER Fonksiyonu Kullanımı...
- :: PHP ile Basit Dosya Yükleme
- :: Web Tasarım öğrenmeye nereden başla...
- :: Mac Bilgisayarınıza Windows 7 Yükle...
- :: PHP dilini kullanarak MySQLi tekniğ...
- :: Excel Hesap tablosunda ÇOKEĞERSAY F...
- :: ASP.net Giriş Örnekleri, Textbox, L...
- :: Linux İşletim Sistemi Giriş ve Orta...
- :: Excel Hesap tablosunda ÇOKETOPLA Fo...
- :: PHP Dili kullanarak MySQLi Tekniği ...
- :: Web sitenizi Google Web Dil Çeviric...
- :: Mac ve Windows Dosya Sistemleri Ara...
- :: Web Sitenize Google Güvenlik Kodu E...
- :: Mesaj Özütü (Hash) Algoritmaları...
- :: Asp.net ile Sql Server Veritabanına...
- :: Excel Hesap tablosunda EĞERSAY Fonk...