使用CSS，当用户将鼠标悬停在元素上时，如何向元素添加圆形的灰色背景

Question

当用户将鼠标悬停在元素上时，我正在尝试为该元素添加灰色的圆形背景。理想地像例子。之前：

之后：

/* this is my current code (css) */
a:hover {
background-color: gray;
border-radius: 50%;
}

<a href="http://somerandomlinks.com">Some Random link...</a>
<!--example link only -->

相反，它变成了一个奇怪的椭圆形的东西。   注意： ：我以堆栈溢出按钮为例。对不起，图像模糊。

Answer 1

使用border-radius: 50px;和padding:10px;代替border-radius: 50%;

a:hover {
  background-color: gray;
  border-radius: 50px;
  padding: 10px;
}

<br>
<a href="http://somerandomlinks.com">Some Random link...</a>
<!--example link only -->

Answer 2

您实际上非常接近，我只是做了一个简单的编辑。

CSS属性border-radius基本上可以填满您的角落，值越高，舍入的锐度就越大。 50％实际上很多，所以这就是为什么您要提起它呈椭圆形。

请参考以下示例：

/* this is my current code (css) */
a:hover {
background-color: #eff0f1;
border-radius: 4px;
}

<a href="http://somerandomlinks.com">Some Random link...</a>
<!--example link only -->

具有更多椭圆形的示例：

/* this is my current code (css) */
a{
    padding: 10px;
}

a:hover {
    background-color: #eff0f1;
    border-radius: 50px;
}

<a href="http://somerandomlinks.com">Some Random link...</a>
    <!--example link only -->

或者，如果您希望背景超出链接文本的背景，则可以构造一个具有默认属性background-color: transparent;的div，然后在悬停时再次删除该CSS属性，然后添加所需的background-color和border-radius以及您喜欢的值。

示例：

/* this is my current code (css) */
.link-background {
  background-color: transparent;
}

.link-background{
  padding: 0.8%;
  width: 22%;
}

.link-background:hover{
  background-color: #eff0f1;
  border-radius: 4px;
}

<div class="link-background">
<a href="http://somerandomlinks.com">Some Random link...</a>
<!--example link only -->
</div>

Answer 3

您的方向是正确的，但您只需要在文本周围填充一些填充以使其看起来更合适即可。

a:hover {
background-color: gray;
border-radius: 13px;
  padding: 10px;
}

链接：https://codepen.io/Harsh89/pen/RYeWvX

Answer 4

您必须在寻找这样的东西：

<a href="#" class="btn-default">example</a>

样式：

<style>
.btn-default{
    display: inline-block;
    padding: 10px 20px;
    position: relative;
    text-decoration: none; z-index: 1;
}

.btn-default:hover{
    background: none;
    color: #ffffff;
    text-decoration:none;
}

.btn-default::before{
    content: "";
    background:#666666;
    position: absolute;
    left: 0; right: 0;
    bottom: 0; top:0;
    border-radius: 50%;
    transform: scale(0);
    -webkit-transform:scale(0);
    -moz-transform:scale(0);
    transition: transform 300ms ease-in-out;
    -webkit-transition: transform 300ms ease-in-out;
    -moz-transition: transform 300ms ease-in-out;
    z-index: -1;
}

.btn-default:hover::before{
    transform: scale(1);
}
</style>