Bir Önceki Dersimizde Dreamwever Kullanarak CSS Yardımıyla Link Oluşturmayı Anlatmıştım.
Dreamweaver CS4 Kullanarak CSS Link Kontrolü Resimli Anlatım.
Şimdide Linke Hover Vermeyi Anlatacağım Yani Mausla Linkin Üzerine Gelindiğinde Linkimizin Rengini Değiştireceğiz Bunu da Aynı Şekilde Dreamweaver CS4 Kullanarak CSS Yardımıyla Yapacağız.

Daha Önce Oluşturduğumuz İndex.html ve stil.css Dosyasını Açıyoruz. Aslında Sadece index.html Dosyasını Açmamız Yeter Çünkü stil.css index te Tanımlandığı İçin Otomatik Açılacaktır.

Şimdi a Tagına Maus Özelliği Kazandıralım. Burada Yapmanız Gereken Olay Çok Basit stil.css İçindeki a Tagına :hover Yazıp color: #F00; Rengini Değişip İstediğimiz Bir Rengi Vereceğiz.

stil.css İçinde Bulunan Aşağıdaki Kodu Aynen Kopyalıyoruz:

PHP- Kodu:

a {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: bold;
    color: #F00;
    text-decoration: none;
} 


Daha Sonra Bu a Tagının Hemen Bitişiğine :hover Yazıp Yazı Rengini Kırmızıdan Siyah Yapıp Bir Alt Satırına Aynen Yapıştırcaz.

PHP- Kodu:

a:hover {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: bold;
    color: #000;
    text-decoration: none;
} 


Burda Sadece Yazı Rengini Değiştik Siz Eğer İsterseniz Yazı Stili Yazı Büyüklüğü Vs. Her Şeyi Değişebilirsiniz. Hatta Mausla Yazının Üstüne Gelindiğinde Aynı Zamanda Altı Çizgilide Olsun İstiyorsanız text-decoration: none; Kısmını Değişip. text-decoration: underline;

PHP- Kodu:

a:hover{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: bold;
    color: #000;
    text-decoration: underline;
} 


Şimdi stil.css Dosyamızı Kapatıp index.html Dosyamızı Çalıştırabiliriz.

Bu Özellikleri Değişmek İsterseniz Sağ Tarafta Bulunan CSS STYLES Bölümünde a:hover Yazan Yere Mausla Çift Tıklayıp Özelliklerini Değiştirebilirsiniz.