HTML 如何在禁用的锚点上悬停时添加“禁用圆圈”

在本文中，我们将介绍如何在禁用的锚点上悬停时添加“禁用圆圈”。有时，在网页设计中，我们希望禁用某些链接，但仍然能够通过鼠标悬停在链接上来提供一些视觉提示。使用HTML和CSS，我们可以实现这个效果。

阅读更多：HTML 教程

设置禁用的锚点

首先，我们需要创建一个禁用的锚点。使用HTML的<a>标签来创建链接，然后通过添加disabled类来禁用链接。以下是一个示例：

<a href="#" class="disabled">禁用的链接</a>

添加悬停效果

接下来，我们需要通过CSS添加悬停效果。我们将使用:hover伪类选择器来为禁用的锚点添加样式。在这种情况下，我们将添加一个“禁用圆圈”，以突出显示该链接是禁用状态。以下是具体的CSS代码：

a.disabled:hover {
  cursor: not-allowed;
  position: relative;
}

a.disabled:hover::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: red;
}

我们首先为禁用的锚点添加了一个not-allowed的鼠标样式，以表示禁用状态。然后，我们使用了::before伪元素来创建一个圆圈，并使用绝对定位将其居中于链接。通过调整width和height属性，我们可以设置圆圈的大小。通过调整background-color属性，我们可以改变圆圈的颜色。

示例

下面是一个完整的示例，演示了如何在禁用的锚点上悬停时添加“禁用圆圈”的效果：

<!DOCTYPE html>
<html>
<head>
<style>
a.disabled {
  text-decoration: none;
  color: black;
  opacity: 0.5;
}

a.disabled:hover {
  cursor: not-allowed;
  position: relative;
}

a.disabled:hover::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: red;
}
</style>
</head>
<body>

<a href="#" class="disabled">禁用的链接</a>

</body>
</html>

在上面的示例中，我们将链接的颜色设置为黑色，使用opacity属性将其透明度设置为0.5，以表示链接处于禁用状态。