Halo teman – teman selamat datang kembali pada tips dan trik Dumet School, di artikel sebelumnya kita juga sudah membahas beberapa fungsi – fungsi pada jQuery. Dan pada kesempatan kali ini saya akan memberikan tips dan trik tentang Cara Menggunakan Fungsi mouseenter dan mouseleave Pada jQuery fungsi ini dapat kita gunakan untuk menghasilkan layout yang variatif tentunya berhubungan dengan interface antara user dan tampilan. Dengan tampilan yang atraktif membuat website kita banyak di sukai oleh user, karena interaksi antara user dan tampilan terjalin dengan adanya sedikit adanya animasi. Kali ini kita akan mencoba mempraktekkan dengan studi case yang sederhana
Baik, sekarang kita lanjutkan implementasikan Cara Menggunakan Fungsi mouseenter dan mouseleave Pada jQuery teman – teman siapkan text editornya dan copy script html nya di bawah ini
<!DOCTYPE html>
<html>
<head><br> <title><strong>Cara Menggunakan Fungsi mouseenter dan mouseleave Pada jQuery</strong></title>
</head>
<body>
<p>Click or move the mouse pointer over this paragraph.</p>
</body>
</html>
Save dengan nama index.html, kemudian berikutnya kita berikan library jQuery nya
https://code.jquery.com/jquery-3.2.1.min.js
Kemudian masukkan script jQuery nya di bawah ini
<script><br>$(document).ready(function(){<br> $("p").on({<br> mouseenter: function(){<br> $(this).css("background-color", "red");<br> }, <br> mouseleave: function(){<br> $(this).css("background-color", "blue");<br> }, <br> click: function(){<br> $(this).css("background-color", "yellow");<br> } <br> });<br>});<br></script>
Jika sudah save dan jalankan pada browsernya, maka jika berhasil ketika mouse berada di area tag p maka mouseenter akan di jalankan yang di dalamnya ada css background berwarna merah, kemudian ketika mouse keluar dari area tag p maka mouseleave akan di jalankan dan di berikan background berwarna biru, kemudian jika tag p di klik maka akan berubah menjadi backgorund berwarna kuning. Semua itu adalah fungsi dari mouseenter yang berarti akan berfungsi ketika mouse berada di dalam area,kemudian mouseleave akan berfungsi ketika mouser keluar dari area nya, dan yang terakhir fungsi click kemarin kita juga sudah membahasnya. Teman – teman bisa review di artikel sebelumnya.
Baiklah inilah cara simpel untuk menggunakan fungsi mouseenter dan mouseleave, teman – teman kembangkan lagi untuk belajar. Saya kira sekian dulu pada artikel kali ini tentang Cara Menggunakan Fungsi mouseenter dan mouseleave Pada jQuery kita berjumpa kembali di artikel berikutnya. Semoga bermanfaat, terimakasih dan sampai jumpa.