Menyembunyikan tautan dengan CSS dapat dilakukan dengan beberapa cara, tetapi kita akan melihat dua metode di mana URL dapat disembunyikan sepenuhnya dari tampilan. Jika Anda ingin membuat perburuan atau easter egg di situs Anda, ini adalah cara yang menarik untuk menyembunyikan tautan.
Cara pertama adalah dengan menggunakan "tidak ada" sebagai nilai properti pointer-peristiwa CSS. Yang lainnya adalah dengan hanya mewarnai teks agar sesuai dengan latar belakang halaman.
Perlu diingat bahwa kedua metode tidak akan membuat tautan benar-benar hilang dari yang ditemukan saat menelusuri kode sumber. Namun, pengunjung tidak akan memiliki cara yang sederhana dan mudah untuk melihatnya, dan pengunjung pemula Anda tidak akan memiliki petunjuk bagaimana menemukan tautannya.
Catatan: Jika Anda mencari petunjuk tentang cara menautkan lembar gaya eksternal, petunjuk ini bukan yang Anda cari. Lihat Apa Lembar Gaya Eksternal? sebagai gantinya.
Nonaktifkan Peristiwa Pointer
Metode pertama yang dapat kita gunakan untuk menyembunyikan URL adalah membuat tautan tidak melakukan apa-apa. Ketika mouse melayang di atas tautan, itu tidak akan menunjukkan apa yang ditunjukkan oleh URL dan itu tidak akan membiarkan Anda mengkliknya.
Tuliskan HTML dengan benar
Satu halaman web, pastikan hyperlink terbaca seperti ini:
ThoughtCo.comTentu saja, "https://www.thoughtco.com/" perlu mengarahkan ke URL aktual yang ingin Anda sembunyikan, dan ThoughtCo.com dapat diubah menjadi kata atau frasa apa pun yang Anda suka yang menggambarkan tautan tersebut.
Idenya di sini adalah bahwa kelas yang aktif akan digunakan dengan CSS di bawah ini untuk menyembunyikan tautan secara efektif.
Gunakan Kode CSS ini
Kode CSS harus ditujukan ke kelas aktif dan jelaskan ke browser bahwa acara pada tautan klik, seharusnya "tidak ada," seperti ini:
.aktif {pointer-events: none; kursor: default; }Anda dapat melihat metode ini beraksi di JSFiddle. Jika Anda menghapus kode CSS di sana, lalu menjalankan kembali data, tautan tiba-tiba menjadi dapat diklik dan digunakan. Ini karena ketika CSS tidak diterapkan, tautan tersebut berperilaku normal.
Catatan: Ingat bahwa jika pengguna melihat kode sumber halaman, mereka akan melihat tautan dan tahu dengan tepat kemana ia pergi karena seperti yang kita lihat di atas, kode tersebut masih ada, itu tidak dapat digunakan.
Ubah Warna Tautan
Biasanya, perancang web akan membuat hyperlink warna yang berbeda dari latar belakang sehingga pengunjung dapat benar-benar melihat mereka dan tahu ke mana mereka pergi. Namun, kami di sini untuk menyembunyikan tautan , jadi mari kita lihat cara mengubah warna agar cocok dengan halaman.
Tentukan Kelas Khusus
Jika kita menggunakan contoh yang sama dari metode pertama di atas, kita dapat dengan mudah mengubah kelas menjadi apa pun yang kita inginkan sehingga hanya tautan khusus yang disembunyikan.
Jika kami tidak menggunakan kelas dan menerapkan CSS dari bawah ke setiap tautan, maka semua itu akan hilang. Bukan itu yang kami kejar di sini, jadi kami akan menggunakan kode HTML ini yang menggunakan kelas hidem khusus:
ThoughtCo.comCari Tahu Warna Apa yang Digunakan
Sebelum kita memasukkan kode CSS yang sesuai untuk menyembunyikan tautan, kita perlu mencari tahu warna apa yang ingin kita gunakan. Jika Anda memiliki latar belakang yang kuat, seperti putih atau hitam, maka itu mudah. Namun, warna khusus lainnya harus tepat juga.
Misalnya, jika warna latar belakang Anda memiliki nilai hex e6ded1 , Anda perlu tahu bahwa agar kode CSS berfungsi dengan benar untuk halaman yang Anda inginkan menghilang ke dalamnya.
Ada banyak alat "color picker" atau "eyedropper" yang tersedia, salah satunya disebut ColorPick Eyedropper untuk browser Chrome. Gunakan ini untuk sampel warna latar belakang halaman web Anda untuk mendapatkan warna hex.
Sesuaikan CSS untuk Mengubah Warna
Sekarang Anda memiliki warna yang seharusnya menjadi tautan, saatnya untuk menggunakannya dan nilai kelas khusus dari atas, untuk menulis kode CSS:
.hideme {color: # e6ded1; }Jika warna latar belakang Anda sederhana seperti putih atau hijau, Anda tidak harus meletakkan tanda # sebelum itu:
.hideme {color: white; }Lihat kode contoh metode ini di JSFiddle ini.