Monday, June 11, 2012

:active, :hover, dan :focus CSS

Umumnya user agent menampilkan teks-teks tautan dengan style yang berbeda-beda.

Tapi dengan CSS, memungkinkan anda menggunakan link pseudo-class :active, :hover, dan :focus untuk mengatur stylenya sendiri.

:hover
:hover bisa digunakan untuk mengatur style teks tautan ketika pointer mouse tepat di atas teks tautan, sebagai contoh:

A:hover { color: green; text-decoration: underline; } ... <A HREF="#">Link</A>

:active
:active bisa digunakan untuk mengatur style teks tautan ketika teks tautan tersebut dalam posisi diklik lalu ditahan, yaitu diantara waktu pengguna menekan tombol mouse dan melepasnya, sebagai contoh:

A:active { color: yellow; } ... <A HREF="#">Link</A>

:focus
:focus bisa digunakan untuk mengatur style teks tautan ketika teks tautan tersebut menerima fokus masukan keyboard atau ketika teks tautan tersebut diseleksi.

Untuk mendapatkan urutan penerimaan fokus keyboard, elemennya harus mempunyai TABINDEX, sebagai contoh:

A:focus { color: blue; } ... <A HREF="#" TABINDEX="1">Link 1</A> <A HREF="#" TABINDEX="2">Link 2</A> <A HREF="#" TABINDEX="3">Link 3</A>