如何仅使用CSS显示链接

要禁用任何网站的链接，我们可以使用CSS的属性，如将pointer-event设置为none，然后将光标设置为默认值，这将禁用活动链接，用户无法访问链接。有时需要禁用链接以进行一些更新或提供网站的安全性。政府或组织是这个示例最适合的，每当他们需要后端网站的任何更新时，他们只需禁用链接。

本文将展示如何仅使用CSS显示链接。

语法

<a href="link_of_any_website" class="class_name"></a>

这是一个锚点标签，用于表示站点链接。class_name是一个属性，用于定义特定元素的CSS属性。

使用的属性

在示例中使用的属性包括：

color - 定义文本的颜色。
opacity - 定义HTML中文本或图像的透明级别。
text-decoration - 定义添加到文本的装饰，如下划线、上划线、删除线、下划线上划线和无。
pointer-event - 定义元素对事件的响应方式。例如-链接是否处于活动状态或非活动状态。
cursor - 定义鼠标指向任何链接时的移动方式。
font-weight - 定义文本的粗细程度。

示例

在本例中，我们使用两个类名为active和not-active的类。非活动类设置名为pointer-event的属性，该属性将禁用锚点元素中使用的链接，但在活动类中，链接是启用的。

<!DOCTYPE html>
<html>
   <title>Tutorialspoint</title>
   <head>
      <style>
         h1{
            color: darkgreen;
         }
         .not-active{
            opacity: 0.6;
            text-decoration: none;
            pointer-events: none;
            cursor: default;
            color: blue;
            font-weight: bold;
         }
         .active{
            opacity: 0.6;
            text-decoration: none;
            color: blue;
            font-weight: bold;
         }
      </style>
   </head>
   <body>
      <center>
         <h1>Tutorialspoint</h1>
         <h3 style="color: green">(www.tutorialspoint.com)</h3>
         <p>The Disable link:
            <a href="https://www.tutorialspoint.com" class="not-active">Click Here</a>
         </p>
         <p>The Enable link:
            <a href="https://www.tutorialspoint.com" class="active">Click Here</a>
         </p>   
      </center>
   </body>
</html>