Ao criar páginas web, por vezes quer que uma ligação âncora (<a>) seja visível, mas não funcione. Talvez essa secção do site ainda esteja em construção, ou a ligação seja apenas decorativa. Seja qual for o motivo, tornar uma âncora não clicável é simples com algumas regras CSS.
O excerto de código
Comece com um excerto rápido que deixa uma âncora não clicável:
<a href="#" class="inactive-link">Unclickable Link</a>
Depois, no CSS, adicione os seguintes estilos:
.inactive-link {
pointer-events: none;
cursor: default;
}
Um caso de utilização
Imagine que tem um menu de navegação, mas uma das páginas está em construção. Quer que a ligação continue visível para manter o design, mas sem que os utilizadores interajam com ela. Eis um exemplo:
<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>
Conclusão
Com apenas algumas linhas de CSS pode tornar qualquer âncora não clicável. É uma forma rápida e eficaz de gerir ligações inativas ou provisórias no site. Experimente esta técnica da próxima vez que precisar de uma ligação visível, mas sem função.