Memodifikasi Hover Link dengan Menggunakan CSS

Wahwah…. Rasanya sudah lama sekali saya tidak menyapa sobat lewat tulisan dalam blog ini. Semoga sobat tidak menderita gara-gara kangen sama saya yah…(hehe… ngelantur abiis…) .
Sobat, pada posting sebelumnya saya telah sedikit membahas tentang pemanfaatan CSS untuk memodifikasi properti pada tulisan, seperti warna, ukuran huruf dsb. Sekarang saya akan sedikit membahas tentang cara memodifikasi efek hover pada sebuah link. Simak terus bahasannya… check it out!


Apa itu efek hover?
Sebelum mulai ada baiknya sobat mengetahui terlebih dahulu apa itu efek hover, bagi sobat yang sudah tahu apa itu efek hover silahkan lewati bagian ini  dan langsung “cara membuat efek hover”. Efek hover adalah berubahnya property (seperti warna, ukuran huruf, dsb) dari sebuah link ketika pointer mouse tepat berada di atas link tersebut. Contohnya adalah sebagai berikut:
1)    Google
2)    Yahoo
3)    Facebook
4)    Twitter
5)    Kaskus
Cobalah untuk meletakan mouse pointer pada salah satu link diatas, maka sobat akan lihat bahwa link tersebut warnanya berubah dari biru menjadi hijau kebiruan dan terdapat garis bawah, nah itulah yang dinamakan efek hover.

Cara membuat efek hover
Pertama-tama, buatlah tag pada bagian header HTML sebagai tempat untuk menuliskan CSS yang kita buat. Dalam hal ini kita menggunakan internal CSS (pembahasan mengenai internal CSS telah dibahas pada posting sebelumnya).

Selanjutnya buatlah stylesheet seperti berikut:

a:hover
{
    color:red;
    font-size:200%;
        text-decoration:none;
}

    Dengan menggunakan stylesheet diatas, efek hover yang dimaksud sudah selesai dibuat, tinggal bagaimana sobat memodifikasinya. Adapun stylesheet diatas dibuat agar ketika mouse pointer diletakan di atas sebuah link, maka link tersebut akan menjadi berwarna merah dan berukuran dua kali dari ukuran semula.  “text-decoration:none” digunakan untuk menghilangkan garis bawah pada link.
    Demikianlah, cara memodifikasi link dengan menggunakan CSS. Mudah bukan?. untuk lebih jelasnya, sobat bisa download langsung contoh script lengkap-nya disini, bisa langsung dijalankan dengan browser kesayangan sobat.

Sampai jumpa pada pembahasan selanjutnya…