Tutorial Blog, Tips Blogging, SEO, Belajar Syntax HTML, PHP, CSS, dan Aktifitas Coding Lainnya

Membuat Warna Elemen Berubah Saat Kursor Melintas

Pada kesempatan kali ini, sinau coding akan berbagi sedikit tutorial CSS tentang cara membuat warna sebuah elemen berubah saat ada kursor melintasinya. Pembahasan ini termasuk dari bagian pseudo-classes, yaitu cara-cara untuk mengatur style link dan sebuah elemen HTML. Seperti cara untuk mengatur style warna link menjadi berbeda-beda, apakah itu link aktif, link yang sudah pernah dikunjungi, dan sebagainya.

Nah, pada kali ini sinahu coding akan membahas pada bagian membuat warna sebuah elemen HTML berubah saat ada kursor melintas. Elemen di sini bisa berupa apa saja, namun sebagai contoh saya akan menggunakan elemen <div> sebagai bahan latihan.

Ada banyak jenis pseudo-classes yang bisa digunakan. Tapi yang paling populer dan sering dipake kegunaannya adalah pseudo-classes yang jenis link, visited, hover, dan active. Untuk membuat perubahan warna saat kursor melintas, maka yang digunakan adalah hover. Sehingga, struktur coding cara untuk membuat elemen <div> berubah warna saat ada kursor yang melintasinya adalah seperti berikut:


<!DOCTYPE html>
<html>
<head>
<style>
div {
    background-color: yellow;
    color: black;
    padding: 25px;
    text-align: center;
}
div:hover {
    background-color: red;
}
</style>
</head>
<body>

<div class="mouseover">Coba Kursor Melintas di Sini</div>

</body>
</html>

Arti dari struktur coding tersebut adalah warna background kuning, tulisan yang ada di dalam elemen <div> berwarna hitam, dan saat kursor melintas elemen <div> tersebut akan berubah warna menjadi merah. Seperti ini hasilnya :


Coba Kursor Melintas di Sini

Itulah tutorial sederhana untuk membuat warna elemen <div> berubah saat ada kursor melintasinya. Konco sinahu bisa memodifikasinya dengan uji coba menggunakan elemen lain. Yang perlu diperhatikan adalah bagaimana susunan struktur penulisan codingnya. Next masih akan membahas sedikit tambahan tentang pseudo-classes yang lain. So, stay terus ya di sinahu coding.



7 Komentar untuk "Membuat Warna Elemen Berubah Saat Kursor Melintas"

Back To Top