Membuat Style untuk Status Link

Terdapat 4 macam keadaan link yaitu:

1. unvisited yaitu ketika link ini belum diklik 

2. visited yaitu ketika link ini sudah diklik

3. hover yaitu ketika mouse sedang berada di atas  link

4. active yaitu ketika mouse sedang mengklik link

Penting:

Penulisan stylenya harus berurut dari nomor 1 sampai nomor 4.

Syntax:

a:link{ kode css }

a:visited{ kode css }

a:hover{ kode css }

a:active{ kode css }

Contoh:

Buatlah sebuah file HTML bernama statusLink.html dan masukkan kode berikut ini:

<head>

<style>

a{ 

color:white;

padding:7px;

text-decoration:none

 }

a:link{ background-color:red }

a:visited{ background-color:black }

a:hover{ color:blue }

a:active {background-color:yellow}

</style>

</head>

<body>

<a href="http://a2fahmi.com" target="_blank">a2fahmi.com</a>

<a href="http://detik.com">detik.com</a>

<a href="http://bola.net">bola.net</a>

</body>

Keterangan:

  • text-decoration:none, kode ini berarti saya menghilangkan garis bawah pada link
  • padding:7px, kode ini berarti saya memberikan jarak antara tulisan dari link dengan batas dari kotak sekitar 7px

Hasil:

Klik 2x nama filemu dan lihatlah hasilnya pada browsermu

2016 © Fahmi Basya Kartapura