Tips Berganti Background Saat Pointer Mengarah ke Comment Box (Hovering)

Melanjutkan tutorial tentang background image di area comment box reply, yang telah saya sampaikan di Tips memberi background image pada comment box reply .

Maksud dari hovering adalah, saat pointer mouse kita arahkan ke comment box reply maka background atau gambar yang melatar belakangi box tersebut akan berganti, menjadi gambar lain.
Tehnik ini kadang diperlukan agar box reply tidak terlalu sesak dengan gambar dan bisa memperlihatkan text yang diketik oleh pemakai / user.

Kita mulai.

Pertama, siapkan gambar atau image untuk background standart display.
Kedua, siapkan juga gambar yang akan ditampilkan saat pointer berada di atas box (hovering).

Contoh, saya akan siapkan dua buah gambar berikut ini :

Background asal.



Background saat hovering



Dan jika saya pasang di box comment reply :

Dan apabila pointer hovering :

CSS nya :

textarea#body {
-moz-border-radius: 8px;
background: #FFFFFF url(http://img24.imageshack.us/img24/8265/beruangmo9.gif) no-repeat scroll center bottom;
border: 2px solid blue;
color: #000000;
}textarea#body:hover {
background: #FFFFFF url(http://img14.imageshack.us/img14/2956/mousecatgw2.gif) no-repeat scroll right bottom;
}

Dan jika saya menginginkan agar saat hover box reply menjadi bersih, saya tinggal meniadakan image background nya saja.

textarea#body:hover {
background: #FFFFFF none repeat scroll 0 0;
}

Anda bisa mencobanya dengan meng-klik button berikut ini :

 

Semoga bermanfaat.
Enjoy.

Attachment: trickmphovering.html