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