CSS ile bir bağlantıyı gizlemek birkaç yolla yapılabilir, ancak bir URL’nin görünümden tamamen gizlenebildiği iki yönteme bakacağız. Sitenizde bir çöpçü avı veya paskalya yumurtası oluşturmak istiyorsanız, bu, bağlantıları gizlemenin ilginç bir yoludur. İlk yol kullanmaktır Yok olarak işaretçi olayları CSS özellik değeri. Diğeri, metni sayfanın arka planına uyacak şekilde renklendirmektir. Birisi HTML kaynak kodunu incelerse hiçbir yöntem bağlantıyı gizlemez. Bununla birlikte, ziyaretçilerin onu görmenin basit ve anlaşılır bir yolu olmayacak ve acemi ziyaretçilerinizin bağlantıyı nasıl bulacaklarına dair bir fikri olmayacak.
İşaretçi Olayını Devre Dışı Bırakın
Bir URL’yi gizlemek için kullanabileceğimiz ilk yöntem, bağlantının hiçbir şey yapmamasını sağlamaktır. Fare bağlantının üzerine geldiğinde, URL’nin neyi işaret ettiğini göstermez ve tıklamanıza izin vermez.
HTML’yi Doğru Yazın
Web sayfasından biri, köprünün şu şekilde okuduğundan emin olun: hayateli.com
class = “ql-syntax”> Elbette, “https://www.hayateli.com/” gizlenmesini istediğiniz gerçek URL’yi göstermesi gerekir ve hayateli.com bağlantıyı tanımlayan herhangi bir kelime veya kelime öbeği ile değiştirilebilir. Buradaki fikir, sınıfın aktif , bağlantıyı etkin bir şekilde gizlemek için aşağıda listelenen CSS ile kullanılacaktır.
Bu CSS Kodunu Kullanın
CSS kodunun aktif sınıfı ele alması ve bağlantıya tıklandığında olayın olması gerektiğini tarayıcıya açıklaması gerekir. Yok, bunun gibi: .active {
işaretçi olayları: yok;
imleç: varsayılan;
}
class = “ql-syntax”> Bu yöntemi JSFiddle’da çalışırken görebilirsiniz. CSS kodunu buradan kaldırır ve ardından 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 şekilde davranmasıdır. Kullanıcı sayfanın kaynak kodunu görüntülerse, bağlantıyı görür ve tam olarak nereye gittiğini bilir çünkü yukarıda gördüğümüz gibi, kod hala oradadır, sadece kullanılamaz.
Bağlantının Rengini Değiştirin
Normalde, bir web tasarımcısı köprüleri arka plandan zıt bir renk haline getirir, böylece ziyaretçiler onları görebilir ve nereye gittiklerini bilir. Ancak, biz buradayız bağlantıları gizle, o halde sayfanın rengine uyması için rengi nasıl değiştireceğimize bakalım.
Özel Bir Sınıf Tanımlayın
Yukarıdaki ilk yöntemden aynı örneği kullanırsak, sınıfı istediğimiz gibi değiştirebiliriz, böylece yalnızca özel bağlantılar gizlenir. Bir sınıf kullanmasaydık ve bunun yerine CSS’yi aşağıdan her bağlantıya uygularsak, hepsi kaybolurdu. Burada peşinde olduğumuz şey bu değil, bu yüzden özel olanı kullanan bu HTML kodunu kullanacağız. beni sakla sınıf: hayateli.com
Hangi Rengi Kullanacağınızı Öğrenin
Bağlantıyı gizlemek için uygun CSS kodunu girmeden önce, hangi rengi kullanmak istediğimizi bulmamız gerekiyor. Zaten beyaz veya siyah gibi sağlam bir arka plana sahipseniz, bu kolaydır. Bununla birlikte, diğer özel renklerin de kesin olması gerekir. Örneğin, arka plan renginizin onaltılık değeri varsa e6ded1CSS kodunun düzgün çalışması için bunu bilmeniz gerekir. Bu “renk seçici” veya “damlalık” araçlarından çok sayıda mevcuttur ve bunlardan biri Chrome tarayıcısı için ColorPick Damlalık olarak adlandırılır. 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ştirin
Bağlantının olması gereken renge artık sahip olduğunuza göre, CSS kodunu yazmak için bunu ve yukarıdaki özel sınıf değerini kullanma zamanı geldi: .hideme {
renk: # e6ded1;
}
Arka plan renginiz beyaz veya yeşil gibi basitse, önüne # işaretini koymanız gerekmez: .hideme {
Beyaz renk;
}
Bu JSFiddle’da bu yöntemin örnek koduna bakın.
