Ocultar un enlace con CSS puede hacerse de varias maneras, pero veremos dos métodos en los que una URL puede estar completamente oculta a 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 los enlaces.
La primera forma es usando «none» como el
pointer-eventsCSS valor de la propiedad. La otra es simplemente coloreando el texto para que coincida con el fondo de la página.
Ninguno de los dos 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 no tendrán ni idea de cómo encontrar el enlace.
Índice de contenidos
Desactivar el evento del puntero
El primer método que podemos usar para ocultar una URL es hacer que el enlace no haga nada. Cuando el ratón pasa el ratón por encima del enlace, no muestra hacia dónde apunta la URL y no le permite hacer clic en ella.
Escribir el HTML correctamente
En la página web, asegúrese de que el hipervínculo diga lo siguiente:
Por supuesto, «https://www.lifewire.com/» necesita apuntar a la URL real que desea ocultar, y Lifewire.com puede cambiarse a cualquier palabra o frase que le guste que describa el enlace.
La idea aquí es que la clase
active con el CSS que se indica a continuación para ocultar el enlace de forma efectiva.
Usar este código CSS
El código CSS necesita dirigirse al activo class y explicar al navegador que el evento sobre el que se hace clic en el enlace, debe ser «none», así:
.active {puntos-eventos: ninguno;
. cursor: default;
}
Puedes ver este método en acción en JSFiddle. Si eliminas el código CSS allí y luego vuelves a ejecutar los datos, el enlace de repente se vuelve clicable y utilizable. Esto se debe a que cuando no se aplica el CSS, el enlace se comporta normalmente.
Si el usuario ve el código fuente de la página, verá el enlace y sabrá exactamente a dónde va porque, como vemos arriba, el código sigue ahí, simplemente no es utilizable.
Cambiar el color del enlace
Normalmente, un diseñador web hará que los hipervínculos tengan un color diferente del fondo para que los visitantes puedan verlos y saber a dónde van. Sin embargo, estamos aquí para ocultar enlaces, así que veamos cómo cambiar el color para que coincida con el de la página.
Definir una clase personalizada
Si usamos el mismo ejemplo del primer método anterior, podemos simplemente cambiar la clase a lo que queramos para que sólo se oculten los enlaces especiales.
Si no usáramos una clase y en su lugar aplicáramos el CSS desde abajo a cada enlace, entonces todos ellos desaparecerían. Eso no es lo que estamos buscando aquí, así que usaremos este código HTML que está usando la costumbre hideme class:
Averigüe de qué color usar
Antes de introducir el código CSS apropiado para ocultar el enlace, tenemos que averiguar qué color queremos usar. Si ya tienes un fondo sólido, como blanco o negro, entonces es fácil. Sin embargo, otros colores especiales también necesitan ser exactos.
Por ejemplo, si su color de fondo tiene un valor hexadecimal de e6ded1, necesita saber que para que el código CSS funcione correctamente.
Hay muchas de estas herramientas de «selector de color» o «cuentagotas» disponibles, una de las cuales se llama ColorPick Eyedropper para el navegador Chrome. Se usa para probar el color de fondo de su página web para obtener el color hexadecimal.
Personalizar el CSS para cambiar el color
Ahora que tiene el color que debería tener el enlace, es el momento de utilizarlo y el valor de la clase personalizada desde arriba, para escribir el código CSS:
.hideme {
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>"">>>>>>>>>>>>>""">i color: #e6ded1;
}
Si su color de fondo es simple como el blanco o el verde, no tiene que poner el signo # delante de él:
.hideme {
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>"">>>>>>>>>>>>>""">i color: blanco;
}
Vea el código de ejemplo de este método en este JSFiddle.
