Esconder unha ligazón con CSS pódese facer de varias maneiras, pero veremos dous métodos nos que un URL pode estar completamente oculto da vista. Se queres crear unha caza de caza ou ovo de Pascua no teu sitio, é unha forma interesante de ocultar enlaces.
O primeiro xeito é usar "none" como o valor da propiedade CSS do punteiro-eventos. O outro é simplemente colorear o texto para coincidir co fondo da páxina.
Teña presente que ningún dos dous métodos fará que a ligazón desapareza totalmente de ser atopado ao buscar o código fonte. Non obstante, os visitantes non terán unha forma sinxela e sinxela de facelo, e os seus visitantes novatos non terán ni idea de como atopar a ligazón.
Nota: Se estás a buscar instrucións sobre como vincular unha folla de estilo externa, estas instrucións non son o que estás. Vexa Que é unha folla de estilo externo? en vez.
Desactivar o evento do punteiro
O primeiro método que podemos usar para ocultar unha URL é facer que a ligazón non faga nada. Cando o rato sobre a ligazón, non mostrará o que apunta o URL e non o permitirá premer nel.
Escribir o HTML correctamente
Unha da páxina web, asegúrese de que o hipervínculo lea así:
ThoughtCo.comPor suposto, "https://www.thoughtco.com/" precisa apuntar á URL real que quere ocultar e ThoughtCo.com pode ser modificado a calquera palabra ou frase que queira que describe a ligazón.
A idea aquí é que a clase activa utilízase co seguinte CSS para ocultar efectivamente a ligazón.
Use este código CSS
O código CSS necesita para dirixir a clase activa e explicar ao navegador que o evento ao premer co enlace, debería ser "ningún", así:
.active {pointer-events: none; cursor: predeterminado; }Podes ver este método en acción sobre JSFiddle. Se elimina o código CSS alí e, a continuación, volve a executar os datos, a ligazón de súpeto faise clicable e utilizable. Isto ocorre porque cando o CSS non se aplica, a ligazón compórtase normalmente.
Nota: Lembre que se o usuario ve o código fonte da páxina, verán a ligazón e saberán exactamente onde vai, como se vemos anteriormente, o código aínda está aí, simplemente non se pode usar.
Cambia a cor da ligazón
Normalmente, un diseñador web fará que os hipervínculos teñan unha cor distinta que o fondo para que os visitantes poidan ver e saber de onde van. Non obstante, estamos aquí para ocultar enlaces , entón vexamos como cambiar a cor para coincidir coa da páxina.
Define unha clase personalizada
Se usamos o mesmo exemplo do primeiro método anterior, podemos simplemente cambiar a clase para o que queremos para que só estean ocultas as ligazóns especiais.
Se non usamos unha clase e, en vez, aplicamos o CSS de abaixo a cada ligazón, entón todos desaparecerían. Isto non é o que estamos aquí despois, entón imos usar este código HTML que usa a clase hideme personalizada:
ThoughtCo.comDescubra a cor para usar
Antes de ingresar o código CSS apropiado para ocultar a ligazón, necesitamos descubrir que cor queremos usar. Se xa ten un fondo sólido, como branco ou negro, entón é fácil. Non obstante, outras cores especiais precisan ser exactas tamén.
Por exemplo, se a súa cor de fondo ten un valor hexadecimal de e6ded1 , necesitará saber que o código CSS funcione correctamente para a páxina na que desexa que desapareza.
Hai moitas destas ferramentas "color picker" ou "eyedropper" dispoñibles, unha delas chamada Colorpick Eyedropper para o navegador Chrome. Úsaa para probar a cor de fondo da túa páxina web para obter a cor hexadecimal.
Personaliza o CSS para cambiar a cor
Agora que ten a cor que debe ter a ligazón, é hora de empregar ese e do valor de clase personalizado de arriba, para escribir o código CSS:
.hideme {color: # e6ded1; }Se a túa cor de fondo é sinxela coma branca ou verde, non tes que poñer o sinal # antes del:
.hideme {cor: branco; }Vexa o código de exemplo deste método neste JSFiddle.