Question

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

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

很抱歉，这不是我最强的领域，我不知道我想做的事情是愚蠢的简单还是太难。谢谢你的帮助。

更新：阅读一些提议的解决方案我意识到我应该在我原来的问题中更加清楚。

我遗漏的第一个重点是我不是在寻找悬停效应;当用户调出页面时，我希望显示所有圆圈（和文本，如果可能的话）。

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

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

对不起，我的不完整问题让人们走错了路，试图帮助我。

Answer 1

有多种方法可以做到这一点，我使用num = split($2, flds, ":") if (num == 1) { add = flds[1] } else if (num == 2) { add = flds[1] * 60 + flds[2] } else { add = flds[1] * 1440 + flds[2] * 60 + flds[3] } mins[$1] += add，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%;
}

Answer 2

您可以使用仅限CSS的解决方案来完成圈子而无需修改HTML：

a {
  position: relative;
}

a::after {
  content: "";
  display: block;
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  height: 2em;
  width: 2em;
  background-color: blue;
  opacity: 0;
  transition: opacity 0.2s;
  border-radius: 50%;
}

a:hover::after {
  opacity: .5;
}

<a href>Getting a head start in the health sector</a>

它只要求<a>代码为position: relative，通常不会在现有样式中造成任何明显差异，因为默认情况下链接为{{1} }。

为了让工具提示有效，您可以同时使用display: inline和::before，并通过使用::after属性动态填充工具提示的文本，再次避免使用尽可能对现有HTML进行许多更改：

data-

document.querySelectorAll('a').forEach(a => {
  a.setAttribute('data-tooltip', 'Total: 47 (0.1%) Unique: 28 (0.1%)');
});

body {
  padding: 3em;
}

a {
  position: relative;
}

a::before {
  content: "";
  display: block;
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  height: 2em;
  width: 2em;
  background-color: blue;
  opacity: 0;
  transition: opacity 0.2s;
  border-radius: 50%;
}

a::after {
  content: attr(data-tooltip);
  display: inline-block;
  position: absolute;
  pointer-events: none;
  bottom: 100%;
  left: 50%;
  white-space: nowrap;
  padding: 0.25em;
  font-size: 0.6em;
  color: black;
  background-color: lightgrey;
  border: 1px solid black;
  opacity: 0;
  transition: opacity 0.2s;
}

a:hover::before {
  opacity: .5;
}

a:hover::after {
  opacity: 1;
}

Answer 3

也许可以尝试将标记转换为内联块，并使用:: after伪元素使用以下方法绘制圆形：hover伪类。

示例：

.circle-link {
  display: flex;
  justify-content: center;
  position: relative;
}

.circle-link span {
  display: block;
  height: 20px;
  width: 20px;
  position: absolute;
  visibility: hidden;
  background-color: blue;
  opacity: .5;
  border-radius: 50%;
}

.circle-link:hover span {
  visibility: visible;
}

<div class="circle-link">
  <a href="my_link.com" >Here is the text of my link</a>
  <span></span>
</div>

Answer 4

除非您使用事件监听器功能，否则您应该使用Javascript或Jquery。鼠标悬停，单击或悬停效果，但即使这些都可以使用纯Css实现，在CSS中使用以下属性/伪类：

    ::before & ::after
    & or, :hover & :target

，其他一张海报上提到过＆＃34;捕捉＆＃34;事件。
要获得一个圆，只需给出一个div的CSS属性;

     border-radius:50%;
     bakground-color:You Choose purple, blue or hex value;

＆安培;宽度：;您选择，将确定圆的大小。＆安培;设置它们;

      position:absolute;
      top:?;   right:?;   bottom:?;  left:?;  /*To move them 
                                                   around

如果我没记错的话，左：向右移动，向右移动：向左移动如果您在两个链接上使用z-index属性，并且圆圈div不必使圆圈透明，但它完全取决于您希望如何设置样式。目前在上面的例子中，圆圈与文本重叠，＆amp;扭曲链接文本的颜色，这可能是不可取的。可以减损整体外观。不仅如此，它还消除了文本元素的对比度。您希望文本是粗体，或者比背后的元素更亮。

使用工具提示，我会给它们一个2 / 5px的边界半径，并可能在它们下方生成一个光晕.Goodluck，上面的其他一些答案也很好..

您提到的Greyish工具提示可以通过创建两个div来制作，大约18px高度，128px宽度。然后使用位置元素将它们分开制作两个较小的div（可能是9px到14px），两者的背景颜色与上面的两个相同，使用绝对位置定位它们。所以你有两个小组的大组。使用变换：在两个较小的变换上旋转（45度）。＆安培;可能变换：偏斜（？）以达到所需的角度。然后将他们的Zindex设置为较大的Zindex。

可能是fiddley，获得正确的位置＆amp; 这可能是一种更容易的方法。但是我还在学习......

古德勒克。

Answer 5

使用一些背景和大小创建和div，边框半径为50％，创建和div宽度工具提示文本。将元素的位置设置为绝对值。向鼠标移动添加事件侦听器，并将元素移动到某个链接上时将其移动到光标位置。它会看起来很漂亮，特别是如果你添加一些动画来移动。

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

5 个答案: