在html鏈接上放置一個彩色圓圈

Question

是否有一種簡單的方法（使用css / js / jquery）在鏈接頂部居中放置透明的彩色圓圈，如下例所示？ 灰色框中的文字也很好。

我首先從以下問題的答案開始進行嘗試： 將背景圖片放在文字上？ 。 但是，當我將彩色疊加層縮短到少於100％時，我無法使其位於文本的中心（更不用說顯示為圓圈了）。

抱歉，但這不是我最擅長的領域，我不知道我想做的事是愚蠢的簡單還是太難了。 謝謝你的幫助。

更新：閱讀一些建議的解決方案后，我意識到我在最初的問題中應該更加清楚。

我忽略的第一個重要點是，我並不是在尋找懸停效果。 當用戶調出頁面時，我希望顯示所有圓圈（如果可能，還顯示文字）。

第二個重要點是，我的目標是動態添加樣式，因此我不會事先知道鏈接在哪里或鏈接的大小。 我知道的信息將是鏈接本身（URL和ID）以及該鏈接所需的圓圈的顏色。 （我想做的是創建一個熱圖，指示頁面上的哪些鏈接獲得了最多的點擊。）

這使我想到了我遺漏的第三點：並不是所有的圓圈都具有相同的顏色。 我正在尋找4種顏色選擇； 例如，一個頁面可能有三個綠色圓圈和兩個紫色圓圈。

抱歉，我的不完整問題使人們誤入歧途，試圖為我提供幫助。

Answer 1

有多種方法可以做到這一點，我使用margin: auto with top: 0; left: 0; bottom: 0; right:0; top: 0; left: 0; bottom: 0; right:0; 第一次translate ，第二次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> 

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 ， 通常不會在現有樣式中造成任何可見的差異，因為默認情況下，鏈接為display: inline 。

為了使工具提示起作用，您可以同時使用::before和::after ，並通過使用data- attribute屬性動態填充工具提示的文本，再次避免對現有HTML進行盡可能多的更改：

 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; } 

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

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   

，其他海報中的一位提到要“捕捉”事件。
要獲得一個圓，只需給div的CSS屬性即可；

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

＆ 寬度：; 您選擇，將確定圓的大小。 並設置它們；

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

如果我沒記錯的話，left：向右移動，right：向左移動。
如果在鏈接和圓div上同時使用z-index屬性，則不必使圓透明，但它完全取決於您希望為其設置樣式的方式。 當前，在上面的示例中，圓圈使文本重疊，並且扭曲了鏈接文本的顏色，這可能是不希望的，並且會損害整體外觀。 不僅如此，它還消除了文本元素的對比度。 您希望文本加粗或比其后面的元素亮。

借助工具提示，我可以為它們提供2 / 5px范圍內的邊框半徑，並且可以在它們下面設置發光效果。.Goodluck，上面的其他一些回答也很好。

您可以通過創建兩個div來制作您提到的Greyish工具提示，這些div的高度約為18px，寬度約為128px。 使用position元素將它們隔開，然后制作兩個較小的div（也許9px至14px），它們的背景顏色都應與您在上面創建的兩個div相同，並使用absolute位置對其進行定位。 因此，您將大的分為兩小對。 對兩個較小的對象使用Transform：Rotate（45degs）。 甚至可能使用Transform：Skew（？）獲得所需的角度。 然后將其Zindex設置在較大的Zindex之后。

可能會很無聊，找到正確的位置，這可能是一種簡單得多的方法。 但是我仍在學習中...

祝好運。

Answer 5

只需使用具有某些背景和大小的50％邊框半徑創建和div，然后創建和div寬度工具提示文本即可。 將元素的位置設置為絕對。 將事件偵聽器添加到鼠標移動，並將元素移到某個鏈接上時將其移動到光標位置。 看起來特別好，特別是如果您要添加一些動畫來移動的話。