Question

 .addcircle{
    width:15%;
    height:30px;
    position:relative;
    }
    .addcircle:hover{
    background: #1a1aff;
    color:white;
    }
    .addcircle:hover a{
    background: #1a1aff;
    color:white;
    }
    .addcircle:after{
     position: absolute;
        z-index: 1;
        left: 80%;
        /* top: 0%; */
        width: 30px;
        height: 30px;
        margin-top: 0px;
        
        border-radius: 50%;
        content: "";
    }


      .addcircle:hover:after{background: #1a1aff;}

    <div id="main">
    HOOVER LINK BELOW
    <div class="addcircle">
    <a href="">some page</a>
    </div>
    <div class="addcircle" style="width:20%">
    <a href="">some page 2</a>
    </div>
    </div>

如何实现与main（1st link）相同的响应宽度？

在示例中您可以看到，第一个悬停看起来不错，但是第二个悬停了……没有任何线索吗？

因为当我检查屏幕更大或更小时，我的圈子会移动一些地方。

Answer 1

不会为您完成所有工作，但似乎您已经想不通了。您已经搞砸了关键的边界半径：

a {
  color: white;
  padding: 5px;
  border-radius: 0 1rem 1rem 0 ;
  background-color: blue;
}

<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Some Page</a>
<br/>
<br/>
<a href="https://www.youtube.com/watch?v=32FB-gYr49Y">Some Page 2</a>

根据您的应用程序（将所有行放在一行上的所有预期视？）的需求，悬停将这种风格可能是你所需要的。

Answer 2

只需将display属性添加到您的.addcircle div中即可：

.addcircle{
  width:15%;
  height:30px;
  position:relative;
  display: flex;
}

，对于.addcircle：在更改右侧位置而不是左侧之后：

.addcircle:after{
     position: absolute;
        z-index: 1;
        right: -12px;
        width: 30px;
        height: 30px;
        margin-top: 0px;

        border-radius: 50%;
        content: "";
    }

Answer 3

如下所示，我在right上使用了.addcircle:after属性，而不是left，并使用了固定值宽度的负一半就是-15px，这将导致半圆效果和链接的右侧，而无需考虑元素的width。

.addcircle{
    width:15%;
    height:30px;
    position:relative;
}
.addcircle:hover{
    background: #1a1aff;
    color:white;
}
.addcircle:hover a{
    background: #1a1aff;
    color:white;
}
.addcircle:after{
    position: absolute;
    z-index: -1;
    right: -15px;
    width: 30px;
    height: 30px;
    margin-top: 0px;
    border-radius: 50%;
    content: "";
}


.addcircle:hover:after{
    background: #1a1aff;
}

<div id="main">
    HOOVER LINK BELOW
    <div class="addcircle">
    <a href="">some page</a>
    </div>
    <div class="addcircle" style="width:20%">
    <a href="">some page 2</a>
    </div>
    </div>

但是，您无需在链接周围使用<div class="addcircle">。仅使用<a>个元素就可以实现完全相同的效果。

a{
    width:20%;
    display: block;
    height: 30px;
    position:relative;
}
a:hover{
    background: #1a1aff;
    color:white;
}
a:after{
    position: absolute;
    z-index: -1;
    right: -15px;
    width: 30px;
    height: 30px;
    margin-top: 0px;
    border-radius: 50%;
    content: "";
}

a:hover:after{
    background: #1a1aff;
}

<div id="main">

    <span>HOOVER LINK BELOW</span>
    
    <a href="">some page</a>
    <a style="width: 50%" href="">some page 2</a>
    
</div>

矩形，带1个圆边

3 个答案: