Quando costruisci pagine web, a volte vuoi che un collegamento àncora (<a>) sia visibile ma non funzionante. Magari quella sezione del sito è ancora in lavorazione, oppure il link è solo decorativo. Qualunque sia il motivo, rendere un’àncora non cliccabile è semplice con poche regole CSS.
Il frammento di codice
Partiamo da un frammento rapido che rende un tag àncora non cliccabile:
<a href="#" class="inactive-link">Unclickable Link</a>
Poi, nel CSS, aggiungi questi stili:
.inactive-link {
pointer-events: none;
cursor: default;
}
Un caso d’uso
Immagina un menu di navigazione in cui una delle pagine è in costruzione. Vuoi che il link resti visibile per coerenza del design, ma che gli utenti non interagiscano. Ecco un esempio:
<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>
Conclusione
Con poche righe di CSS puoi rendere non cliccabile qualsiasi àncora. È un modo rapido ed efficace per gestire link inattivi o segnaposto. Prova questa tecnica la prossima volta che ti serve un link visibile ma senza funzione.