Cada sitio web contiene muchos enlaces en cada interfaz que dirigen al usuario a otras páginas web. Por ejemplo, enlaces para visitar algún otro sitio web como referencia mientras lee una publicación de blog, visite las cuentas de redes sociales de una marca mientras visita sus sitios web y descargar software de computadora, etc. Pero, si se requiere deshabilitar un enlace, se utiliza la propiedad del evento CSS Pointer.

La siguiente publicación explicará cómo se usa la propiedad del evento Pointer en un código para deshabilitar un enlace en un documento HTML.

Deshabilitar un enlace usando CSS

La biblioteca CSS se usa en combinación con otros idiomas como HTML. Entonces, si un documento HTML tiene un enlace para visitar directamente cualquier otra página web, la propiedad CSS Pointer-Events se utiliza para deshabilitar un enlace:

Pointer-Events: Ninguno;
cursor: predeterminado;

Cómo usar la propiedad Pointer-Events en el código?

La instrucción de estilo CSS en la que agregaremos la propiedad Pointer-Events para deshabilitar el enlace debe referirse a la clase que contiene el enlace. Por ejemplo, si tenemos una clase llamada "no activa" que contiene el enlace:

Deshabilite el enlace usando CSS

Enlace:
Haga clic aquí

En el código anterior, el enlace que se puede hacer clic tiene una clase "no activa" que se utilizará para acceder a este elemento HTML.

El código anterior genera la siguiente salida:

Haga clic en el enlace dirige al usuario al motor de búsqueda de Google:

La propiedad de evento de puntero

• Dentro de un elemento de estilo CSS, escriba la propiedad del evento de puntero (Pointer-Event: Ninguno) mientras se refiere a la clase (no activa) que contiene el enlace que debe deshabilitarse.
• Establezca el cursor como cualquiera de las opciones como predeterminada, ninguno, puntero, etc.

Después de ejecutar el código, no habrá cambios en la visualización gráfica del enlace desde el exterior, pero cuando el usuario haga clic en él, no hará nada:

Esta fue la forma más fácil de deshabilitar el enlace en un código utilizando declaraciones CSS.

Conclusión

Un enlace que dirige al usuario a otras páginas web se puede deshabilitar fácilmente a través de una propiedad CSS "Pointer-Events: Ninguno". Esto no requiere ningún cambio en la lógica del código o la clase en la que se ha creado el enlace. Se requiere una propiedad de evento de puntero simple en el elemento de estilo que se refiere a la clase que contiene el enlace.