Fungsi hover biasanya digunakan untuk membuat menu dropdown pada sebuah website. Namun, tidak hanya untuk itu fungsi hover digunakan. Misalnya ketika kita ingin gambar yang disorot melakukan animasi berputar, zoom, fade, slide dan lain sebagainya, maka kita memerlukan fungsi hover jika menggunakan JQuery.
Di bawah ini sedikit contoh penggunaan fungsi hover untuk menampilkan dan menyembunyikan sebuah element div.
Cara menggunakan fungsi hover atau ketika mouse berada di atas element tertentu pada JQuery adalah sebagai berikut.
ELemen yang dihover/disorot mouse
//perhatikan id yang digunakan
<div id="hover">Hover/sorot aku</div>
Tampilan/pesan ketika sudah dihover/disorot
//perhatikan id yang digunakan
<div id="msg">Terimakasih telah berkenan menyentuhku</div>
Script JQuery hover
//import file jQuery
<script type="text/javascript" src="sumber/jquery.js"></script>
<script type="text/javascript">
//agar jQuery bekerja ketika dokumen siap
$(document).ready(function(){
//menyembunyikan isi pesan
$('#msg').hide();
//memberi event hover pada id hover
$('#hover').hover(function(){
//memberi tugas pada id msg agar tampil
$('#msg').show();
},
function(){
//menyembunyikan id msg ketika tidak dihover
$('#msg').hide();
});
});
</script>
Keterangan: fungsi hide() digunakan untuk menyembunyikan isi element HTML, sedangkan fungsi show() digunakan untuk menampilkan isi element HTML.
Contoh
