Скриването на връзка с CSS може да се извърши по няколко начина, но ще разгледаме два метода, при които даден URL адрес може да бъде напълно скрит. Ако искате да създадете лов за изчистване или великденски яйце на вашия сайт, това е интересен начин да скриете връзките.
Първият начин е да използвате "никой" като стойността на свойството CSS на показалеца-събития. Другото е просто оцветяване на текста така, че да съответства на фона на страницата.
Имайте предвид, че нито един от методите няма да направи връзката напълно да изчезне от намирането при търсене на изходния код. Въпреки това, посетителите няма да имат прост и ясен начин да ги видят и вашите посетители няма да имат представа как да намерят връзката.
Забележка: Ако търсите инструкции как да свържете външен лист с стилове, тези указания не са това, което следвате. Вижте какъв външен лист за стилове? вместо.
Деактивирайте събитието на указателя
Първият метод, който можем да използваме, за да скрием URL, е да направим връзката да не прави нищо. Когато мишката се задържи над връзката, тя няма да покаже какво посочва URL адресът и няма да ви позволи да кликнете върху нея.
Напишете HTML правилно
Една от уеб страниците, уверете се, че хипервръзката чете по следния начин:
ThoughtCo.comРазбира се, "https://www.thoughtco.com/" трябва да сочи към действителния URL адрес, който искате да бъде скрит, и ThoughtCo.com може да бъде променена на всяка дума или фраза, която ви харесва, която описва връзката.
Идеята тук е, че активният клас ще се използва с CSS по-долу, за да скрие връзката ефективно.
Използвайте този CSS код
CSS кодът трябва да е насочен към активния клас и да обясни на браузъра, че събитието при щракване на връзката, трябва да бъде "никоя", както следва:
.active {pointer-events: няма; курсор: по подразбиране; }Можете да видите този метод в действие при JSFiddle. Ако премахнете CSS кода там и след това повторете данните, връзката изведнъж става кликван и използваем. Това е така, защото когато CSS не се прилага, връзката се държи нормално.
Забележка: Не забравяйте, че ако потребителят види изходния код на страницата, той ще види връзката и ще знае точно къде отива, защото, както виждаме по-горе, кодът все още е там, просто не може да се използва.
Променете цвета на връзката
Обикновено уеб дизайнерът ще направи хипервръзките различен цвят от фона, така че посетителите да могат да ги видят и да знаят къде отиват. Въпреки това, ние сме тук, за да скрием връзките , така че нека видим как да променим цвета, който съответства на този на страницата.
Определете потребителски клас
Ако използваме същия пример от първия метод по-горе, можем просто да променим класа на каквото искаме, така че да бъдат скрити само специални връзки.
Ако не използвахме класа и вместо това приложихме CSS отдолу на всяка връзка, тогава всички щяха да изчезнат. Тук не сме тук, затова ще използваме този HTML код, който използва обичайния клас hideme:
ThoughtCo.comРазберете кой цвят да използвате
Преди да въведем подходящия CSS код, за да скрием връзката, трябва да разберем кой цвят искаме да използваме. Ако вече имате солиден фон, като бяло или черно, това е лесно. Обаче други специални цветове трябва да бъдат точни.
Например, ако цветът на фона има шестнадесетична стойност на e6ded1 , трябва да знаете, че CSS кодът да работи правилно за страницата, в която искате да изчезне.
Има изобилие от тези инструменти за "избор на цвят" или "капкомер", като един от тях се нарича ColorPick Eyedropper за браузъра Chrome. Използвайте го, за да изпробвате цвета на фона на уеб страницата си, за да получите шестнадесетичен цвят.
Персонализирайте CSS, за да промените цвета
Сега, когато имате цвета, който трябва да бъде връзката, е време да го използвате и стойността на класическата класа отгоре, за да напишете CSS кода:
.hideme {цвят: # e6ded1; }Ако цветът на фона ви е прост като бяло или зелено, не трябва да поставяте знака # пред него:
.hideme {цвят: бял; }Вижте примерния код на този метод в това JSFiddle.