Al construir páginas web, a veces quieres que un enlace (<a>) se vea, pero que no funcione. Quizá esa sección del sitio aún está en obras, o el enlace es solo decorativo. Sea cual sea el motivo, hacer que un ancla no sea clicable es sencillo con unas pocas reglas CSS.
El fragmento de código
Empecemos con un fragmento rápido que deja un ancla sin posibilidad de clic:
<a href="#" class="inactive-link">Unclickable Link</a>
Después, en tu CSS, añade estos estilos:
.inactive-link {
pointer-events: none;
cursor: default;
}
Un caso de uso
Imagina que tienes un menú de navegación, pero una de las páginas está en construcción. Quieres que el enlace se siga viendo para mantener el diseño, pero que nadie interactúe con él. Un ejemplo:
<nav>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="#" class="inactive-link">Contact (Coming Soon)</a></li>
</ul>
</nav>
Conclusión
Con un par de líneas de CSS puedes dejar cualquier ancla sin clic. Es una forma rápida y eficaz de gestionar enlaces inactivos o de marcador de posición. Prueba esta técnica la próxima vez que necesites un enlace visible, pero que no haga nada.