CSS：悬停时的色调圆形div？只留下div？

Question

我试图在悬停时着色圆形div（如保持其原始颜色，但在其上添加黑色透明色调）。我在另一个div中的div中有一个three.js来创建一个循环效果，然后围绕这个创建了一个额外的div：

<ul>
        <!-- <li>-->
       <div class = "overlay"><a href="polyGalaxy/index.html"><div class ="circle1">
        <div id ="btn1"></div>
        </div>
        </a></div>
        <!--</li>
        <li>
        <div class ="circle2">
        <div id ="btn2"></div>
        </div>
        </li>-->
        </ul>

我试图用这个来创建一个色调：

.overlay:hover {
    background: rgba(0,0,0,0.5);
    border-radius: 50%;
    z-index: 5;
}
.circle1 {
    background: #50a3a2;
    background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
    background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
    display: table;
    border-radius: 50%;
    position: relative;
    margin: 50px auto;
    height: 100px;
    width: 100px;
}
#btn1 {

    vertical-align: middle;
    text-align:center;
    left:0%;
    position:relative; /*makes left effective*/
    display:table-cell;
}

然而叠加只是在圆形div后面着色。我知道这一点，因为当我删除border-radius时，我得到了这个：

如何在悬停时给圆形div着色？

Answer 1

您可以使用伪元素创建该效果，该伪元素具有rgba背景颜色（色调），在悬停时淡出：

＆＃13;

＆＃13;

.circle1 {
  background: #50a3a2;
  background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
  background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
  display: table;
  border-radius: 50%;
  position: relative;
  margin: 50px auto;
  height: 100px;
  width: 100px;
}

.circle1::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  border-radius: inherit;
  display: block;
  opacity: 0;
  transition: opacity 0.5s;
}

.circle1:hover::after {opacity:1;}

＆＃13;

<div class="circle1">
  <div id="btn1"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

jsFiddle：https://jsfiddle.net/azizn/9zn3mpa4/