Ocultar un enllaç amb CSS es pot fer de diverses maneres, però veurem dos mètodes en què una URL pot estar completament oculta de la vista. Si voleu crear una cacera de guarda o un ou de pasqua al vostre lloc, aquesta és una manera interessant d'ocultar els enllaços.
La primera manera és utilitzar "none" com el valor de la propietat CSS del punter-esdeveniments. L'altra és simplement acolorint el text per coincidir amb el fons de la pàgina.
Tingueu en compte que cap dels dos mètodes farà que l'enllaç desaparegui totalment des que es trobés en buscar el codi font. Tanmateix, els visitants no tindran una manera senzilla i senzilla de veure-la, i els visitants novells no tindran ni idea de com trobar l'enllaç.
Nota: si cerqueu instruccions sobre com enllaçar un full d'estils extern, aquestes instruccions no són el que està després. Vegeu Què una fulla d'estil extern? en canvi.
Desactiva l'esdeveniment del punter
El primer mètode que podem utilitzar per amagar un URL és fer que l'enllaç no faci res. Quan el ratolí passa per sobre de l'enllaç, no mostrarà el que apunta l'URL i no us permetrà fer-hi clic.
Escriure el HTML correctament
Un de la pàgina web, assegureu-vos que l'hipervincle es llegeixi així:
ThoughtCo.comPer descomptat, "https://www.thoughtco.com/" ha d'indicar l'URL real que voleu amagar i ThoughtCo.com es pot canviar a qualsevol paraula o frase que us agradi que descrigui l'enllaç.
La idea aquí és que la classe activa s'utilitzarà amb el CSS següent per amagar eficaçment l'enllaç.
Utilitzeu aquest codi CSS
El codi CSS necessita fer front a la classe activa i explicar al navegador que l'esdeveniment en fer clic a l'enllaç, ha de ser "cap", d'aquesta manera:
.active (pointer-events: none; cursor: predeterminat; }Podeu veure aquest mètode en acció a JSFiddle. Si elimineu el codi CSS allà i, a continuació, torneu a executar les dades, el vincle de sobte es fa clic i es pot fer servir. Això és degut a que quan el CSS no s'aplica, l'enllaç es comporta de manera normal.
Nota: Recordeu que, si l'usuari visualitza el codi font de la pàgina, veuran l'enllaç i saben exactament on es dirigeix, perquè com el que veiem a dalt, el codi encara està allà, només no es pot utilitzar.
Canvieu el color de l'enllaç
Normalment, un dissenyador web farà que els hipervincles tinguin un color diferent del fons perquè els visitants puguin veure'ls i saber on van. Tanmateix, estem aquí per ocultar els enllaços , així que anem a veure com canviar el color perquè coincideixi amb el de la pàgina.
Definiu una classe personalitzada
Si utilitzem el mateix exemple des del primer mètode anterior, només podem canviar la classe a allò que volem, de manera que només estiguin ocults els enllaços especials.
Si no utilitzem una classe i, en canvi, hem aplicat el CSS de més avall a tots els enllaços, tots desapareixerien. Això no és el que estem aquí, així que utilitzarem aquest codi HTML que està utilitzant la classe hideme personalitzada:
ThoughtCo.comEsbrineu quin color voleu utilitzar
Abans d'introduir el codi CSS adequat per ocultar l'enllaç, hem d'esbrinar quin color volem utilitzar. Si ja teniu un fons sòlid, com el blanc o el negre, això és fàcil. No obstant això, altres colors especials també han de ser exactes.
Per exemple, si el vostre color de fons té un valor hexadecimal de e6ded1 , necessiteu que el codi CSS funcioni correctament per a la pàgina en què voleu que desaparegui.
Hi ha moltes d'aquestes eines disponibles per "color picker" o "eyedropper", una de les quals es diu Colorpick Eyedropper per al navegador Chrome. Utilitzeu-lo per mostrar el color de fons de la vostra pàgina web per obtenir el color hexadecimal.
Personalitzeu el CSS per canviar el color
Ara que teniu el color que hauria de tenir l'enllaç, és hora d'utilitzar-lo i el valor de classe personalitzat de dalt, per escriure el codi CSS:
.hideme {color: # e6ded1; }Si el vostre color de fons és senzill com el blanc o el verd, no heu de posar el símbol # abans d'això:
.hideme {color: blanc; }Vegeu el codi d'exemple d'aquest mètode en aquest JSFiddle.