:hover, :active, :focus

Pseudo-class dalam CSS

Pseudo-class adalah selektor CSS yang memungkinkan Anda mengganti gaya elemen HTML berdasarkan interaksi pengguna. Di bawah ini adalah contoh cara menggunakannya:

1. :hover Pseudo-class

:hover digunakan untuk mengubah gaya elemen saat kursor mouse berada di atasnya. Misalnya, untuk mengubah warna latar belakang saat hover pada tautan:

a:hover {
  background-color: lightblue;
  color: white;
}

2. :active Pseudo-class

:active digunakan untuk mengubah gaya elemen saat elemen tersebut sedang diklik oleh pengguna. Misalnya, untuk mengubah warna tombol saat diklik:

button:active {
  background-color: red;
  color: white;
}

3. :focus Pseudo-class

:focus digunakan untuk mengubah gaya elemen saat elemen tersebut sedang dalam fokus, biasanya terjadi saat pengguna menggunakan keyboard atau perangkat lain untuk menavigasi elemen. Misalnya, untuk mengubah tampilan input teks saat dalam fokus:

input:focus {
  border-color: blue;
  box-shadow: 0 0 5px rgba(0, 0, 255, 0.5);
}

Dengan menggunakan pseudo-class ini, Anda dapat meningkatkan interaktivitas dan responsivitas desain web Anda. Semoga tutorial ini membantu!

PREVIOUS
NEXT