CARA MEMBUAT HOVER CSS

<div class="box"></div>

Langkah Kedua: Menentukan Styling Dasar

Setelah membuat elemen, kamu perlu mendefinisikan gaya dasar dari elemen tersebut. Hal ini bisa kamu lakukan dengan selector class atau selector ID. Di sini, kita akan menggunakan selector class.`

.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

Pada contoh di atas, kita membuat sebuah kotak berwarna merah dengan lebar dan tinggi 100px.

Langkah Ketiga: Menerapkan Efek Hover

Sekarang, kita akan menerapkan efek hover ke kotak merah yang sudah kita buat. Kamu hanya perlu menambahkan ‘:hover’ setelah nama class atau ID.

.box:hover {
  background-color: blue;
}

Dengan demikian, setiap kali kamu mengarahkan kursor kamu ke kotak, warna latar belakang akan berubah dari merah menjadi biru.

Tambahan: Transisi

Jika kamu ingin membuat perubahan warna menjadi lebih halus dan tidak langsung berubah, kamu bisa menambahkan property transisi.

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: background-color 0.5s;
}

Pada contoh di atas, perubahan warna latar belakang akan berlangsung selama 0.5 detik. Kamu dapat menyesuaikan durasi sesuai keinginan.

Sekarang kamu sudah tahu cara membuat hover CSS. Dengan efek hover ini, kamu bisa membuat website kamu menjadi lebih interaktif dan menarik.

Selamat mencoba!