Link Hover Dengan jQuery

Lagi-lagi tentang jQuery. Memang saya sangat senang dengan menggunakan fasilitas yang disediakan oleh pihak jquery untuk memperindah tampilan blog, kali ini jquery dipasang untuk memperindah link, tepatnya pada saat link hover.

Anda bisa lihat contohnya pada blog ini. Arahkan mouse anda ke salah satu judul postingan pada blog ini. Apa yang terjadi ? link hovernya berbeda dengan yang lain bukan ?

Nah anda mulai tertarik dengan ini. Tahap untuk membuat link hover seperti ini sebagai berikut :
1. Masuk ke bagian edit HTML. Lalu masukan code jquery ini diatas </head>

<script src='http://jqueryui.com/latest/jquery-1.3.2.js' type='text/javascript'></script>

2. Selanjutnya masukkan kode javascript berikut, tepat dibawah kode jQuery tadi.

<script type='text/javascript'>
$(document).ready(function() {
$('a').hover(function() { //mouse in
$(this).animate({ opacity: '0.3' } , 1000);
}, function() { //mouse out
$(this).animate({ opacity: '1' }, 1000);
});
});
</script>

 3. Save template.

::catatan :
- Untuk code jquery pada langkah ke-1, apabila anda sudah mempunyainya tidak perlu dipasang lagi.
- Pehatikan pada langkah ke-2. Lihat code yang berwarna merah, itu adalah kata kunci untuk penggunaan efek link hover jquery ini. Anda bisa merubahnya sesuai keinginan, seperti code h1, sidebar, dll. Jangan lupa pastikan di kode CSS anda memiliki kode 'a' tersebut seperti dibawah ini :

a { outline: none;}
a:link { color:#303030; text-decoration:none;}
a:hover { color:#B13E2C; text-decoration: none;}
a:visited {color:#B13E2C; text-decoration:none;}
a:active { color:#007168; outline: none;}

- Angka 0.3 dan 1000 diatas pada kode javascript dapat anda rubah sesuai selera, angka tersebut yang memberikan efek pada link hover anda.
- kode 'opacity' diatas juga anda dapat rubah dengan 'color' dan 'padding', tergantung selera anda.
- Usahakan tidak menggunakan font bold untuk link, karena untuk IE tidak bekerja sempurna.

Sumber : RIKY RIZKIYANA

Subscribe in a reader

Atau Berlangganan gratis Via Email Di bawah ini

.::Artikel Menarik Lainnya::.