Bir bağlantıyı CSS ile gizlemek birkaç yoldan yapılabilir, ancak bir URL'nin tamamen görüntüden gizlenebileceği iki yönteme bakarız. Sitenizde bir çöpçü avı veya paskalya yumurtası oluşturmak istiyorsanız, bu, bağlantıları gizlemenin ilginç bir yoludur.
İlk yol, işaretçi-olay CSS özellik değeri olarak "none" kullanmaktır. Diğeri ise sayfanın arkaplanı ile eşleşmesi için metnin renklendirilmesidir.
Kaynak kodunda arama yapıldığında, iki yöntemin de bağlantının tamamen bulunmamasını unutmayın. Ancak, ziyaretçilerin görecekleri basit ve anlaşılır bir yolu olmayacak ve acemi ziyaretçileriniz bağlantıyı nasıl bulacağına dair bir fikre sahip olmayacak.
Not: Bir harici stil sayfasının nasıl bağlanacağıyla ilgili talimatlar arıyorsanız, bu talimatlar peşinde olmadığınız şey değildir. Harici Stil Sayfası Nedir? yerine.
İşaretçi Etkinliğini Devre Dışı Bırak
Bir URL'yi gizlemek için kullanabileceğimiz ilk yöntem, bağlantının hiçbir şey yapmamasıdır. Fare, bağlantının üzerine geldiğinde, URL'nin işaret ettiği şeyi göstermez ve tıklamanıza izin vermez.
HTML'yi doğru yaz
Bir web sayfası, köprünün böyle okuduğundan emin olun:
ThoughtCo.comTabii ki, "https://www.thoughtco.com/" , gizlemek istediğiniz gerçek URL'yi işaret etmelidir ve ThoughtCo.com , bağlantıyı tanımlayan herhangi bir kelime veya ifadeye değiştirilebilir.
Buradaki fikir, aktif sınıfın, linki etkin bir şekilde gizlemek için aşağıdaki CSS ile kullanılacağıdır.
Bu CSS Kodunu Kullan
CSS kodunun aktif sınıfa hitap etmesi ve tarayıcıya, bağlantının tıklanmasıyla ilgili olayı "yok" gibi olması gerektiğini açıklaması gerekir:
etkin {pointer-events: none; imleç: varsayılan; }Bu yöntemi JSFiddle üzerinde gerçekleştirebilirsiniz. Orada CSS kodunu kaldırır ve verileri yeniden çalıştırırsanız, bağlantı aniden tıklanabilir ve kullanılabilir hale gelir. Bunun nedeni, CSS uygulanmadığında, bağlantının normal davranmasıdır.
Not: Kullanıcı sayfanın kaynak kodunu görüntülediğinde, bağlantıyı görecek ve tam olarak nereye gittiğini bileceklerini unutmayın, çünkü yukarıda gördüğümüz gibi, kod hala oradadır, sadece kullanılamaz.
Bağlantı Renklerini Değiştirin
Normalde, bir web tasarımcısı köprülere arka plandan farklı bir renk katar, böylece ziyaretçiler onları gerçekten görebilir ve nereye gittiklerini bilir. Ancak, bağlantıları gizlemek için buradayız, o yüzden rengi sayfanınkiyle eşleştirmek için nasıl değiştireceğimizi görelim.
Bir Özel Sınıf Tanımlayın
Yukarıdaki ilk yöntemden aynı örneği kullanırsak, sınıfı yalnızca istediğimiz şekilde değiştirebiliriz, böylece yalnızca özel bağlantılar gizlenir.
Eğer bir sınıfı kullanmadıysak ve bunun yerine CSS'yi her bir bağlantıya uyguladıysak, bunların hepsi ortadan kalkacaktır. Burada olduğumuz şey bu değil, bu yüzden özel hidrasyon sınıfını kullanan bu HTML kodunu kullanacağız:
ThoughtCo.comNe Renk Kullanacağını Öğrenin
Bağlantıyı gizlemek için uygun CSS kodunu girmeden önce, hangi rengi kullanmak istediğimizi bulmamız gerekiyor. Zaten sağlam bir arka planınız varsa, beyaz veya siyah gibi, o zaman bu kolay. Bununla birlikte, diğer özel renklerin de aynı olması gerekir.
Örneğin, arka plan renginiz e6ded1 değerinin bir hex değerine sahipse , CSS kodunun kaybolmasını istediğiniz sayfa için düzgün şekilde çalışması gerektiğini bilmeniz gerekir.
Chrome tarayıcı için ColorPick Eyedropper olarak adlandırılan bu "renk seçici" veya "damlalıklı" araçlar mevcuttur. Onaltılık rengi elde etmek için web sayfanızın arka plan rengini örneklemek için kullanın.
Rengi Değiştirmek için CSS'yi Özelleştirme
Artık bağlantının olması gereken renge sahip olduğunuza göre, CSS kodunu yazmak için bunu ve özel sınıf değerini yukarıdan kullanma zamanı:
.hideme {color: # e6ded1; }Arka plan renginiz beyaz veya yeşil gibi basitse, ondan önce # işaretini koymanız gerekmez:
.hideme {renk: beyaz; }Bu JSFiddle'daki bu yöntemin örnek kodunu görün.