CSS：關於懸停的tint圓形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背景色（色彩）的僞元素上懸停變淡這種效果：

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

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

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