Halo teman teman kursuswebsite.org Dumet School, sebelumnya kita telah belajar salah satu event dari javascript yaitu event onclick, dan sekarang kita akan mempelajari event onmouseenter, event ini adalah salah satu event juga dari javascript dimana ketika mouse kita berada tepat di elemen maka element tersebut akan melakukan sesuatu event, cara menggunakannya sangat lah mudah, yuk kita praktekan teman teman cara membuat Event onmouseenter pada Javascript.
teman teman bisa buka text editornya dan ketikan struktur dasar HTML dan jangan lupa di save yah teman teman, simpan dengan nama index.html. seperti gambar di bawah ini.
lalu teman teman buat satu element div dengan id bernama #el
nah setelah itu sebelum penutup tag body, teman teman sisipkan kode javascript berikut yah teman teman.
lalu kita buat variabel el yang menampung id el, seperti contoh gambar berikut
sebelum membuat event mouse enter teman teman berikan style pada #el terlebih dahulu yah biar kita tahu keberadaan #el ini yah :P. ketikan kode berikut setelah tag <title> yah teman teman.
<style>
#el{
background-color: salmon;
width: 200px;
height: 200px;
margin: auto;
text-align: center;
color: #fff;
font-size: 30px
}
</style>
hasilnya seperti berikut
teman teman punya satu tag div dengan id = el seperti di atas, kita kembali ke javascript, dan ketikan kode berikut yah teman teman.
<script>
var el = document.getElementById(‘el’);
el.onmouseenter = function(){
alert(‘event mouseenter bekerja dengan Baik dan benar’);
}
</script>
atau gambar nya seperti berikut.
penejelasannya seperti ini teman teman, kita buat variabel el yang menampung tag element, dan variabel el ini akan di berikan event onmouseenter dan menjalankan fungsi, dimana fungsi ini akan menjalankan alert yang berisi, “event mouseenter bekerja dengan Baik dan benar”. seprti itu penjelasannya yah teman teman. nah coba kita praktekan di web browser kita yah teman teman.
nah seperti itu teman teman, akan muncul alert bilamana teman teman menjalankan mouse melewati variabel el itu,
mungkin sekian tutorial Event onmouseenter pada Javascript semoga bermanfaat yah teman teman.