Aquí hay dos métodos fáciles para ocultar enlaces de páginas web usando CSS

Aquí hay dos métodos fáciles para ocultar enlaces de páginas web usando CSS

Aquí hay dos métodos fáciles para ocultar enlaces de páginas web usando CSS

VALORACIÓN DEL ARTÍCULO:
5/5


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.

TAMBIÉN TE INTERESA

riesgos DeepSeek

Reportan los primeros riesgos de seguridad en DeepSeek

Pocos días después de la irrupción de DeepSeek en el mundo, ya empiezan a aflorar algunos problemas relacionados con la seguridad en DeepSeek y la privacidad de los datos que emplean los usuarios. Son millones y millones personas las que ya están probando las mieles de la IA china. El modelo R1 de DeepSeek ha

dispositivos Alexa

Cómo controlar la privacidad de tus conversaciones con los dispositivos Alexa

Los dispositivos Alexa se han convertido en un miembro más de muchas familias. Ciertamente útiles para recordatorios de la lista de la compra, alarmas, recetas o para disfrutar de un rato de música, estos famosos asistentes virtuales en forma de altavoces son indispensables para muchos y han dado un plus de inteligencia para los hogares.

DeepSeek

Y de repente… DeepSeek: la IA china que planta a cara la tecnología americana

DeepSeek es un ejemplo de lo que está ocurriendo con los grandes avances de la economía moderna. Cada vez que Estados Unidos implanta una solución triunfal, China hace lo propio seguidamente con una mayor eficiencia y a un coste menor. Tradicionalmente, el gigante asiático ha sido un gran replicador en todos los órdenes, pero ahora,

serie Samsung Galaxy S25

Nuevos Samsung Galaxy S25: la IA ya no es una parte sino un todo

Samsung ha presentado oficialmente los nuevos Galaxy S25 Ultra, Galaxy S25+ y Galaxy S25. Había mucha expectación para ver el que es el segundo gran teléfono de 2025 tras el OnePlus 13. Hay diferencias entre ambos, pero lo nuevo de los coreanos pueden marcar un punto de inflexión a nivel de operatividad, ya que la

IA emocional

La IA emocional está más cerca de lo que parece…

¿Es una utopía hablar de IA emocional? ¿Las máquinas pueden tener sentimientos? ¿Hasta qué punto se pude hablar en clave de humanización cuando mezclamos la tecnología? La respuesta está en la neurociencia, aunque el cine ya nos ha dado algunas pistas de cómo podrían sentir los robots. Clásicos como Terminator 2 o Cortocircuito nos mostraron

servidor proxy o VPN

¿Servidor proxy o VPN? Elige lo que más te convenga

La ciberdelincuencia está por todos los lados y puede que en algún momento nos toque a nosotros como usuarios. Así que además de antivirus y sistemas de defensa, puede ser el momento de pensar en la posibilidad de tener un servidor proxy o un VPN. Estas herramientas nos aportarán un extra de privacidad y seguridad