悬停时图标上的圆形背景 - CSS

Question

我正在练习css，我想实现一个很常用的效果，它是基于当鼠标光标移过图标时出现不透明的背景。

无效果

有效果

我正在尝试做同样的效果，但事实证明我没有得到预期的结果，我需要一些帮助

代码：

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

#container .wrap {
  position: relative;
}

#container .wrap {
  cursor: pointer;
}

#container .wrap:after {
  content: '';
  opacity: 0;
  background-color: rgba(0, 0, 0, .15);
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  border-radius: 50%;
  pointer-events: none;
}

#container .wrap:hover:after {
  opacity: 1;
}

<div id="container">
  <div class="wrap">
    <svg viewBox="0 0 20 20" width="2em" height="2em">
     <g fill-rule="evenodd" transform="translate(-446 -350)">
      <path d="M458 360a2 2 0 1 1-4 0 2 2 0 0 1 4 0m6 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0m-12 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0"></path>
      </g>
    </svg>
  </div>
</div>

Answer 1

为圆形容器添加宽度和高度：

#container .wrap:after {
  width: 30px;
  height: 30px;
  content: '';
  opacity: 0;
  background-color: rgba(0, 0, 0, .15);
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  border-radius: 50%;
  pointer-events: none;
}

Answer 2

我将从 this page 获得的样式应用到您的项目后得到的结果如下图所示：

.btn {
    display: inline-block;
    text-decoration: none;
    width: 100px;
    height: 100px;
    line-height: 120px;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    transition: .9s;
}

.btn-animation {
    opacity: 0.5;
    background-color: rgba(0, 0, 0, .15);
    text-align: center;
    width: 149px;
    height: 149px;
    border-radius: 100%;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    color: black;
    font-weight: bold;
    text-decoration: none
}

.btn:hover {
    opacity: 1;
}

#container:after {
    content: '';
    opacity: 0;
    background-color: rgba(0, 0, 0, .15);
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    border-radius: 50%;
    pointer-events: none;
}

<div id="container">
    <div class="wrap">
        <a href="" class="btn btn-animation">
            <svg viewBox="0 0 20 20" width="2em" height="2em">
                <g fill-rule="evenodd" transform="translate(-446 -350)">
                    <path
                        d="M458 360a2 2 0 1 1-4 0 2 2 0 0 1 4 0m6 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0m-12 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0">
                    </path>
                </g>
            </svg>
        </a>
    </div>
</div>

Answer 3

将下面的两个css类改为如下。填充会给圆圈 space。

#container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
}

#container .wrap {
  position: center;
}

Answer 4

你不需要伪元素。您可以在 SVG 周围有一个简单的包装器 div 并对其进行处理。

/* styles for the icon wrap */

.icon-wrap {
  /* don't take the whole line */
  display: inline-block;
  /* transition the background change */
  transition: background-color 0.25s;
  /* height of the icon */
  height: 2em;
  /* width of the icon */
  width: 2em;
  /* space between the icon and the background edge */
  padding: 0.25em;
  /* make it rounded */
  border-radius: 50%;
}


/* styles for the icon wrap when hovered */

.icon-wrap:hover {
  /* add a background on hover */
  background-color: rgba(0, 0, 0, .15);
  /* pointer cursor on hover */
  cursor: pointer;
}

<div class="icon-wrap">
  <svg viewBox="0 0 20 20">
    <g fill-rule="evenodd" transform="translate(-446 -350)">
      <path d="M458 360a2 2 0 1 1-4 0 2 2 0 0 1 4 0m6 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0m-12 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0"></path>
    </g>
  </svg>
</div>

旁注：除非确实需要，否则尽量避免向元素添加 id 属性，尤其是对于您可能在页面上经常使用的元素，例如图标。 class 在 99.99% 的情况下绰绰有余。

悬停时图标上的圆形背景 - CSS

Circular background on icon when is hover - CSS

css

hover

opacity