Para deshabilitar un enlace usando CSS, se puede usar la propiedad pointer-events , que establece si el elemento en la página debe responder o no al hacer clic en los elementos. La propiedad pointer-events se usa para especificar si el elemento se muestra en los eventos del puntero y si no se muestra en el puntero.
El siguiente ejemplo ilustra el enfoque:
Ejemplo 1: El siguiente código muestra el uso de eventos de propiedad donde la etiqueta ‘a’ está deshabilitada, sin cursor (puntero de cursor deshabilitado en la etiqueta ‘a’)
<!DOCTYPE html>
<html>
<head>
<title>Disable Link using CSS</title>
<style type="text/css">
.not-active {
pointer-events: none;
cursor: default;
}
</style>
</head>
<body>
<center>
<h1 style="color: green;">GeeksforGeeks</h1>
<h3>A Computer Science Portal for Geeks</h3>
<b>Disabled link:</b> To visit us
<a href="www.geeksforgeeks.org"
class="not-active">Click Here</a>
<br>
<br>
<b>Enabled link:</b> To use our ide
<a href=
"https://ide.geeksforgeeks.org/tryit.php">
Click Here</a>
</center>
</body>
</html>
Salida: podemos notar que, aunque parece un enlace, no sucede nada cuando colocamos el puntero sobre él o hacemos clic en él.
Ejemplo 2: este código muestra CSS que se aplica a una etiqueta ‘a’ para que parezca que el enlace está deshabilitado, para hacerlo, se pueden usar las propiedades de color y decoración de texto .
<!DOCTYPE html>
<html>
<head>
<title>Disable Link using CSS</title>
<style type="text/css">
.not-active {
pointer-events: none;
cursor: default;
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<center>
<h1 style="color: green;">GeeksforGeeks</h1>
<h3>A Computer Science Portal for Geeks</h3>
<b>Disabled link:</b> To visit us
<a href="www.geeksforgeeks.org" class="not-active">
Click Here
</a>
<br>
<br>
<b>Enabled link:</b> To use our ide
<a href="https://ide.geeksforgeeks.org/tryit.php">
Click Here
</a>
</center>
</body>
</html>
Salida: Aquí se puede ver que ni siquiera parece un enlace.
Publicación traducida automáticamente
Artículo escrito por bilal-hungund y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA