如何仅使用 CSS 显示链接?

cssweb developmentfront end technology更新于 2024/6/19 18:20:17

要禁用任何网站的链接，我们可以将 CSS 属性(例如将 pointer-event 设置为 none)设置为"none"，然后将光标设置为"default"，这将禁用活动链接，用户将无法访问该链接。有时，必须禁用链接才能为网站带来一些更新或安全性。政府或组织最适合这种做法，每当他们需要在网站后端进行任何更新时，只需禁用链接即可。

在本文中，我们将展示如何仅使用 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。非 active 类设置了名为 pointer-event 的属性，该属性将禁用锚元素中使用的链接，但在 active 类中，该链接处于启用状态。

<!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>