hover dan focus
Pseudokelas :hover dan :focus adalah dua pseudokelas yang sering digunakan dalam CSS untuk memberikan gaya tambahan kepada elemen saat interaksi pengguna terjadi.
:hover:
Pseudokelas :hover digunakan untuk menargetkan elemen saat pengguna mengarahkan kursor mouse ke elemen tersebut. Ketika elemen berada dalam keadaan hover, Anda dapat menerapkan gaya tambahan untuk mengubah tampilan elemen tersebut.
Contoh penggunaan :hover:
css
Copy code
.button:hover {
background-color: #ff0000;
color: #fff;
}
Pada contoh di atas, saat pengguna mengarahkan kursor ke elemen dengan kelas .button, latar belakang akan berubah menjadi merah (background-color: #ff0000) dan warna teks akan berubah menjadi putih (color: #fff).
:focus:
Pseudokelas :focus digunakan untuk menargetkan elemen saat elemen tersebut mendapatkan fokus. Biasanya, fokus diberikan kepada elemen saat pengguna berinteraksi dengan elemen tersebut menggunakan keyboard atau perangkat penunjuk lainnya.
Contoh penggunaan :focus:
css
Copy code
input:focus {
border: 2px solid #00ff00;
}
Pada contoh di atas, saat input elemen mendapatkan fokus, tepi elemen akan ditampilkan dengan garis luar berwarna hijau (border: 2px solid #00ff00).
Kedua pseudokelas ini memungkinkan Anda untuk memberikan gaya tambahan kepada elemen saat interaksi pengguna terjadi, sehingga dapat meningkatkan responsivitas dan pengalaman pengguna pada halaman web Anda.
Perlu dicatat bahwa pseudokelas :hover hanya berlaku untuk elemen yang dapat dihover, seperti tautan (<a>), tombol (<button>), atau elemen lain yang mendukung interaksi hover. Pseudokelas :focus berlaku untuk elemen yang dapat menerima fokus, seperti input fields, tombol, atau elemen lain yang dapat diinteraksi menggunakan keyboard atau perangkat penunjuk.
