Merubah background dengan onMouseover

Pada postingan kali ini, kita mencoba menggunakan JS, script sederhana untuk merubah warna background dengan mouse hover.

Cukup simple dan sederhana script ini, namun bukan berarti tidak layak untuk kita pelajari, mari kita lihat scriptnya dibawah ini.

JavaScript onMouseover

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <title>Merubah background dengan onMouseover</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">

<!-- begin CSS code -->

<style>
body {
    padding: 5px; 
    font-family: tahoma; 
    font-size: 14px; 
}
h3 {
    color: maroon; 
    font-family: tahoma;
}
a { 
    color: black; 
    text-decoration: none;
    font-weight: bold;
}
a:hover { 
    text-decoration:underline; 
}
</style>

<!-- end of CSS code -->

</head>
<body>

<!-- this content between tag <body>...</body> will be show on browser -->

<h3>Merubah background dengan onMouseover</h3>
<p>Arahkan cursor pada nama warna</p>

Warna background <a href="#" onMouseover="document.bgColor='gold'">Emas</a> atau <a href="#" onMouseover="document.bgColor='yellow'">Kuning</a> atau juga <a href="#" onMouseover="document.bgColor='lightgreen'">Hijau terang</a>, juga bisa <a href="#" onMouseover="document.bgColor='seablue'">Biru langit</a> dan warna <a href="#" onMouseover="document.bgColor='grey'">Abu abu</a>.

<!-- End of body content -->

</body>
</html>

Pada baris nomor 40 script diatas, onMouseover=document.bgColor, itulah JavaScript yang kita gunakan untuk merubah background ketika dilalui mouse.

Lihat dan edit hasil script di atas pada halaman Realtime HTML Editor ↗, script dan hasilnya akan langsung ditampilkan pada halaman tersebut.

Sampai disini pembahasan tentang Merubah background dengan onMouseover, sampai jumpa lagi di pembahasan berikutnya, Salam sukses buat Anda semua.

Mungkin Anda Menyukai