javascript - 在html链接上放置一个彩色圆圈

是否有一种简单的方法（使用css / js / jquery）将透明彩色圆圈放置在链接顶部，如下面的示例所示？灰色框中的文字也很好。



我尝试从以下问题的答案开始：Put background image over text?。但是，当我将彩色叠加层缩短到少于100％时，我无法使它位于文本的中心（更不用说显示为圆圈了）。

抱歉，这不是我最擅长的领域，我不知道我要做的事是愚蠢的简单还是太难了。谢谢你的帮助。

更新：阅读一些建议的解决方案后，我意识到我在最初的问题中应该更加清楚。

我忽略的第一个重要点是，我并不是在寻找悬停效果。当用户调出页面时，我希望显示所有圆圈（如果可能，还显示文字）。

第二个重要点是我的目标是动态添加样式，因此我不会事先知道链接在哪里或链接将有多大。我知道的信息将是链接本身（URL和ID）以及该链接所需的圆圈的颜色。 （我想做的是创建一个热图，指示页面上的哪些链接获得了最多的点击。）

这使我想到了我遗漏的第三点：并不是所有的圆圈都具有相同的颜色。我正在寻找4种颜色选择；例如，一个页面可能有三个绿色圆圈和两个紫色圆圈。

抱歉，我的不完整问题使人们误入歧途，试图为我提供帮助。

最佳答案

有多种方法可以执行此操作，第一个使用margin: auto和top: 0; left: 0; bottom: 0; right:0;，第二个使用translate。

.container {
  position: relative;
  width: fit-content;
  width: -moz-fit-content;
}

.circle {
  background: #909;
  width: 4em;
  height: 4em;
  border-radius: 2em;
  opacity: 0.4;
}

#circle-1 {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

#circle-2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.grey-box {
  background: #999;
  font-size: 0.8em;
  border: 1px solid #222;
  padding: 0.2em;
  position: absolute;
  top: -70%;
  left: 50%;
}

<div class="container">
  <h2>Getting a head start in the health sector</h2>
  <div id="circle-1" class="circle"></div>
  <div class="grey-box">Total: 47(0.1%) Unique: 28(0.1%)</div>
</div>
Established health sector companies can meet patient needs and cut their own costs by collaborating with startups, research shows.

<div class="container">
  <h3>Judge Business School</h3>
  <div id="circle-2" class="circle"></div>
</div>

关于javascript - 在html链接上放置一个彩色圆圈，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50145044/