Hallo. Teman-teman Dumet School. Kembali lagi dengan saya di Kursus WebDesign. Kali ini saya akan membahas tentang cara Membuat Hover Table Dengan Menggunakan Jquery. Hover adalah suatu efek yang akan muncul pada objek ketika kita arahkan mouse kita ke objek tersebut. Untuk membuat hovernya kali ini saya menggunakan metode jquery yaitu mouseenter dan mouseleave.

Mouseenter adalah posisi mouse ketika sedang berada di dalam suatu objek atau elemen. Sedangkan mouseleave adalah posisi mouse ketika meninggalkan suatu objek atau elemen.

Oke teman-teman. Langsung saja langkah pertama untuk Membuat Hover Table Dengan Menggunakan Jquery yaitu kita buat terlebih dahulu script htmlnya dan teman-teman bisa copy script di bawah ini.

Jika sudah selesai maka teman-teman bisa buat style cssnya sebagai berikut ya dan seperti biasa letakkan di dalam tag head.

Sebelum kita membuat jquerynya teman-teman jangan lupa masukkan link jquerynya atau bisa juga di download untuk pemakaian offline di halaman jquery.com . Dan berikut contoh link jquery.

Oke teman-teman, langkah terakhir kita buat jquerynya masih dalam satu file dengan htmlnya. Dan berikut scriptnya ya teman-teman.

Nah Disini teman-teman bisa lihat kodingannya. Saya menggunakan metode mouseenter pada jquery dimana ketika mouse diarahkan ke objek makan saya menambahkan class hover yang sudah saya buat di dalam css sehingga row atau tr muncul efek dengan background putih. Lalu ketika mouseleave maka sata hapus class hover tersebut.

Demikian artikel tentang cara Membuat Hover Table dengan Menggunakkan Jquery. Semoga bisa bermanfaat dan selamat mencoba ya teman-teman.