Ocultar un enlace con CSS se puede hacer de varias maneras, pero nosotros & amp; apos; veremos dos métodos en los que una URL puede estar completamente oculta de la vista. Si desea crear una búsqueda del tesoro o un huevo de pascua en su sitio, esta es una forma interesante de ocultar enlaces.
La primera forma es usando none como el valor de propiedad CSS pointer-events . El otro es simplemente coloreando el texto para que coincida con el fondo de la página. Ninguno de los métodos oculta el enlace si alguien inspecciona el código fuente HTML. Sin embargo, los visitantes no tendrán una forma simple y directa de verlo, y sus visitantes novatos ganaron & amp; apos; t tienen idea de cómo encontrar el enlace.
Deshabilite el evento puntero
El primer método que podemos usar para ocultar una URL es hacer que el enlace no haga nada. Cuando el mouse se desplaza sobre el enlace, ganó & amp; apos; t muestra a qué apunta la URL y ganó & amp; apos; t le permite hacer clic en ella.
Escriba el HTML correctamente
Una de las páginas web, asegúrese de que el hipervínculo se lea así:
& lt; pre & gt; Lifewire.com & lt; / pre & gt ;
Por supuesto, & amp; quot; https://www.lifewire.com/" necesita señalar la URL real que desea ocultar, y Lifewire.com se puede cambiar a cualquier palabra o frase que desee que describa el enlace.
La idea aquí es que la clase activa se utilizará con el CSS que se detalla a continuación para ocultar efectivamente el enlace.
Use este código CSS
El código CSS debe abordar la clase activa y explicar al navegador que el evento en el enlace clic debe ser ninguno , como este:
Video destacado
& lt; pre & gt; .active {& lt; br & gt ;
eventos punteros: ninguno; & lt; br & gt ;
cursor: predeterminado; & lt; br & gt ;
} & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; & lt; / pre & gt ;
Puede ver este método en acción en JSFiddle. Si elimina el código CSS allí y luego vuelve a ejecutar los datos, el enlace de repente se vuelve clicable y utilizable. Esto se debe a que cuando el CSS no se aplica & amp; apos; t, el enlace se comporta normalmente.
Si el usuario ve el código fuente de page & amp; apos; s, ellos & amp; apos; verán el enlace y sabrán exactamente a dónde va porque, como vemos arriba, el código todavía está allí, simplemente es & amp; apos; t utilizable.
Cambie el color de Link & amp; apos; s
Normalmente, un diseñador web hará que los hipervínculos sean un color contrastante del fondo para que los visitantes puedan verlos y saber a dónde van. Sin embargo, nosotros & amp; apos; estamos aquí para ocultar enlaces , así que let & amp; apos; s ver cómo cambiar el color para que coincida con el de la página.
Defina una clase personalizada
Si usamos el mismo ejemplo del primer método anterior, simplemente podemos cambiar la clase a lo que queramos para que solo se oculten enlaces especiales.
Si no hiciéramos & amp; apos; t usamos una clase y en su lugar aplicamos el CSS desde abajo a cada enlace, entonces todos desaparecerían. Eso no es lo que nosotros & amp; apos; re después de aquí, así que nosotros & amp; apos; usaremos este código HTML que & amp; apos; s usando la clase personalizada hideme :
& lt; pre & gt; Lifewire.com & lt; / pre & gt ;
Descubra qué color usar
Antes de ingresar el código CSS apropiado para ocultar el enlace, debemos averiguar qué color queremos usar. Si ya tiene un fondo sólido, como blanco o negro, entonces eso es fácil. Sin embargo, otros colores especiales también deben ser exactos.
Por ejemplo, si su color de fondo tiene un valor hexagonal de e6ded1 , debe saber que para que el código CSS funcione correctamente.
Hay muchos de estos & amp; quot; color picker & amp; quot; o & amp; quot; eyedropper & amp; quot; herramientas disponibles, una de las cuales se llama ColorPick Eyedropper para el navegador Chrome. Úselo para probar el color de fondo de su página web para obtener el color hexagonal.
Personalice el CSS para cambiar el color
Ahora que tiene el color que debe ser el enlace, es hora de usar eso y el valor de clase personalizado desde arriba, para escribir el código CSS:
& lt; pre & gt; .hideme {& lt; br & gt ;
color: # e6ded1; & lt; br & gt ;
} & lt; / br & gt; & lt; / br & gt; & lt; / pre & gt ;
Si su color de fondo es simple como el blanco o el verde, no tiene que poner el signo # antes:
& lt; pre & gt; .hideme {& lt; br & gt ;
color: blanco; & lt; br & gt ;
} & lt; / br & gt; & lt; / br & gt; & lt; / pre & gt ;
Vea este método y el código de muestra de Apos; s en este JSFiddle.
& amp; # x203A; Informática
