Menyembunyikan pautan dengan CSS boleh dilakukan dengan beberapa cara, tetapi kami akan melihat dua kaedah di mana URL dapat disembunyikan sepenuhnya dari pandangan. Sekiranya anda ingin mencipta pemburu peminjam atau telur easter di laman web anda, ini adalah cara yang menarik untuk menyembunyikan pautan.
Cara pertama adalah dengan menggunakan "none" sebagai nilai penunjuk nilai harta CSS. Yang satunya adalah dengan hanya mewarna teks untuk menyesuaikan latar belakang halaman.
Perlu diingat bahawa kaedah tidak akan membuat pautan hilang sepenuhnya daripada ditemui apabila mencari kod sumber. Walau bagaimanapun, pelawat tidak akan mempunyai cara yang mudah dan mudah untuk melihatnya, dan pelawat baru anda tidak akan mempunyai petunjuk cara mencari pautan.
Nota: Jika anda mencari arahan tentang cara menghubungkan helaian gaya luaran, arahan ini bukanlah perkara yang anda minta. Lihat Apakah Helaian Gaya Luaran? sebaliknya.
Lumpuhkan Acara Pointer
Kaedah pertama yang boleh kita gunakan untuk menyembunyikan URL adalah untuk membuat pautan tidak melakukan apa-apa. Apabila tetikus menjelajah pautan itu, ia tidak akan menunjukkan URL URL dan ia tidak akan membenarkan anda mengkliknya.
Tulis HTML dengan betul
Satu halaman web, pastikan hiperpa baca seperti ini:
ThoughtCo.comSudah tentu, "https://www.thoughtco.com/" perlu menunjuk kepada URL sebenar yang anda mahu tersembunyi, dan ThoughtCo.com boleh ditukar kepada sebarang perkataan atau frasa yang anda suka menerangkan pautan tersebut.
Idea di sini ialah kelas aktif akan digunakan dengan CSS di bawah untuk menyembunyikan pautan secara berkesan.
Gunakan Kod CSS ini
Kod CSS perlu menangani kelas aktif dan terangkan kepada penyemak imbas bahawa acara tersebut pada klik pautan, sepatutnya "tidak ada," seperti ini:
.aktif {pointer-events: none; kursor: lalai; }Anda boleh melihat kaedah ini dalam tindakan di JSFiddle. Jika anda mengalih keluar kod CSS di sana, dan kemudian nyalaan data, pautan tiba-tiba menjadi dapat diklik dan boleh digunakan. Ini kerana apabila CSS tidak digunakan, pautan itu berfungsi dengan normal.
Nota: Ingat bahawa jika pengguna melihat kod sumber halaman, mereka akan melihat pautan dan mengetahui dengan tepat di mana ia pergi kerana seperti yang kita lihat di atas, kod itu masih ada, ia tidak boleh digunakan.
Tukar Warna Pautan & # 39; s
Biasanya, seorang pereka web akan membuat hiperpautan warna yang berbeza daripada latar belakang supaya pengunjung dapat melihatnya dan tahu di mana mereka pergi. Walau bagaimanapun, kami berada di sini untuk menyembunyikan pautan , jadi mari lihat cara menukar warna untuk dipadankan dengan halaman tersebut.
Tentukan Kelas Tersuai
Sekiranya kita menggunakan contoh yang sama dari kaedah pertama di atas, kita hanya dapat menukar kelas kepada apa sahaja yang kita mahu supaya hanya pautan istimewa tersembunyi.
Jika kita tidak menggunakan kelas dan sebaliknya memohon CSS dari bawah ke setiap pautan, maka semuanya akan hilang. Itu bukan apa yang kita selepas di sini, jadi kami akan menggunakan kod HTML ini yang menggunakan kelas hideme tersuai:
ThoughtCo.comCari Out Apa Warna Yang Digunakan
Sebelum kita memasukkan kod CSS yang sesuai untuk menyembunyikan pautan, kita perlu memikirkan apa warna yang kita mahu gunakan. Jika anda mempunyai latar belakang yang padat, seperti putih atau hitam, maka itu mudah. Walau bagaimanapun, warna khas lain juga harus tepat.
Contohnya, jika warna latar belakang anda mempunyai nilai hex e6ded1 , anda perlu tahu bahawa untuk kod CSS berfungsi dengan betul untuk halaman yang anda ingin ia hilang.
Terdapat banyak alat "pemetik warna" atau "eyedropper" yang tersedia, salah satunya dipanggil ColorPick Eyedropper untuk penyemak imbas Chrome. Gunakannya untuk mencuba warna latar belakang halaman web anda untuk mendapatkan warna hex.
Peribadikan CSS untuk Tukar Warna
Sekarang bahawa anda mempunyai warna yang harus dihubungkan, tiba masanya untuk menggunakannya dan nilai kelas tersuai dari atas, untuk menulis kod CSS:
.hideme {color: # e6ded1; }Jika warna latar anda adalah seperti putih atau hijau, anda tidak perlu meletakkan tanda # sebelum ia:
.hideme {color: white; }Lihat kod sampel kaedah ini dalam JSFiddle ini.