Hallo teman-teman? apa kabar? Pada tutorial kali ini kita akan membahas tentang Fungsi Pseudo-Classes :active Pada CSS, Kemarin kita telh membahas fungsi dari :target pada pseudo classses, nah kali ini kita akan membahas tentang salah satu lagi fungsi yang ada pada pseudo classes yaitu :active.
Pada fungsinya :active ialah memberikan style ketika sebuah link telah terklik atau telah ada aksi pada element tersebut, untuk lebih jelasnya kita langsung saja praktekan, sekarang silahkan teman-teman buat sebuah file dan ketikan script HTML berikut ini:
<!DOCTYPE html> <html> <head> </head> <body> <b><a href="#" target="_blank">Dumet School</a> </body> </html>
Saya membuat sebua element link pada bagian bodynya, sekarang silahkan teman-teman tambahkan style CSS berikut ini:
<style>
/* saat mause di hover */
a:hover {
color: red;
}
/* saat terklik oleh mouse */
a:active {
color: blue;
}
</style>
Script lengkapnya adalah seperti berikut ini:
<!DOCTYPE html>
<html>
<head>
<style>
/* saat mause di hover */
a:hover {
color: red;
}
/* saat terklik oleh mouse */
a:active {
color: blue;
}
</style>
</head>
<body>
<b><a href="#" target="_blank">Dumet School</a>
</body>
</html>
Saya mengatur element a saat dihover berwarna merah dan ketika saya klik element a nya maka akan berubah warnanya menjadi biru, jika sudah teman-teman bisa save lalu coba jalankan pada browser masing-masing.
Maka hasilnya ketika normal akan seperti berikut ini :
lalu pada saat dihover hasilnya akan seperti berikut ini :
dan ketika kita klik lalu tahan dengan class :active ini akan berubah warnanya menjadi biru seperti berikut ini:
gimana teman-teman sangat mudah bukan?kiranya cukup dulu untuk tutorial kali ini tentang Fungsi Pseudo-Classes :active Pada CSS, mudah-mudahan apa yang saya berikan bermanfaat bagi teman-teman semuanya, kiranya sampai sini dulu, sampai berjumpa lagi pada tutorial berikutnya, tetap semangat belajarnya, jangan mudah putus asa dan gampang menyrah, happy coding teman-teman semuanya.
terimakahsih.