How to use onmouseover and onmouseout with css property

Onmouseover dan onmouseout merupakan sebuah javascript "Mouse Events" yang dapat digunakan secara simpel dan praktis. Script sederhana ini biasanya berfungsi untuk menampilkan effek berupa perubahan obyek atau style obyek dengan memanfaatkan fungsi mouse. Seringkali dibutuhkan pada saat-saat tertentu (temporer) seperti halnya bentuk demo. Penggunaan 2 variable di atas dapat berdiri sendiri atau dibuat dengan melibatkan bantuan kode css dan javascript. Jika kita menggunakan kode css atau javascript, maka fungsi onmouseover dan onmouseout dapat berkembang menjadi sebuah fungsi dengan effek yang lebih kompleks.

Pada posting ini, secara khusus akan membahas fungsi atau kegunaan onmouseover dan onmouseout saat digunakan secara langsung dalam sebuah tag HTML dengan memanfaatkan css property tanpa bantuan kode lain dalam bentuk css atau javascript.

Prinsip kerja onmouseover dan onmouseout:

Ketika mouse berada di atas sebuah obyek "seluruh variabel dalam onmouseover bekerja" dan ketika mouse meninggalkan obyek maka "seluruh fungsi dalam onmouseout yang bekerja". Beberapa property css dapat anda gunakan pada kedua fungsi di atas, namun dengan cara penulisan property standart javascript. Beberapa property atau elemen css yang sering digunakan diantaranya color, background, text-shadow, text-transform, opacity , cursor serta beberapa yang lain.

Kode Dasar penggunaan onmouseover dan onmouseout

Kode Dasar :

<div style="css property & value" onmouseover="this.style.css property='value';" onmouseout=this.style.css property='value';">DIV Contents</div>

Keterangan :

1. css property & value terdiri atas beberapa properti kode css dan nilainya yang berfungsi untuk membentuk obyek (style obyek).
2. css property berisikan properti kode css yang dituliskan dengan standart javascript.
3. value merupakan nilai dari css property.
4. Tag div dapat diganti dengan tag lain seperti img, p, span atau lainnya.

Contoh penulisan kode secara lengkap :

xHTML-1 :

<div style="margin:20px auto;width:250px;height100px;border:5px solid green;background:gray url(https://lh6.googleusercontent.com/-jDErxybtX0k/TyA3RFfJN2I/AAAAAAAAAMI/0NMpfvmTqOo/s250/img_gubhugreyot-gadisku-01.jpg) center no-repeat;text-align:center;font-size:32px;font-weight:bold;color:brown;line-height:100px;border-radius:10px;" onmouseover="this.style.cursor='move';this.style.background='black';this.style.color='#eee';this.style.borderColor='#900';this.style.opacity='1.0';this.style.filter.alpha.Opacity='100';" onmouseout="this.style.cursor='pointer';this.style.background='blue';this.style.color='magenta';this.style.borderColor='#000';this.style.opacity='0.5';this.style.filter.alpha.Opacity='50';">
gubhugreyot
</div>

xHTML-1 » D E M O :

gubhugreyot

xHTML-2 :

<div style="background:url(https://lh6.googleusercontent.com/-jDErxybtX0k/TyA3RFfJN2I/AAAAAAAAAMI/0NMpfvmTqOo/s250/img_gubhugreyot-gadisku-01.jpg) center no-repeat;">
<div style="margin:20px auto;width:250px;height100px;border:5px solid green;background:transparent;text-align:center;font-size:32px;font-weight:bold;color:brown;line-height:100px;border-radius:10px;" onmouseover="this.style.cursor='move';this.style.background='black';this.style.color='#eee';this.style.borderColor='#900';this.style.opacity='1.0';this.style.filter.alpha.Opacity='100';" onmouseout="this.style.cursor='pointer';this.style.background='blue';this.style.color='magenta';this.style.borderColor='#000';this.style.opacity='0.5';this.style.filter.alpha.Opacity='50';">
gubhugreyot
</div>
</div>

xHTML-2 » D E M O :

gubhugreyot

Catatan berdasar demo :

1. Letakkan cursor property di bagian terdepan.
2. Letakkan opacity property di paling bagian belakang.
3. Perhatikan metode penulisan properti css secara cermat karena ada beberapa pembedaan penulisan termasuk misalnya penggunaan huruf kapital.
4. Data tentang penulisan css properties pada javascript dapat anda buka di sini.