懸停時編輯按鈕

Question

目前我有一個帶有懸停覆蓋層的容器，可以使整個容器變暗。我希望在中間顯示一個編輯按鈕和覆蓋圖。

.service-inner { 
 
    text-decoration: none; 
 
    color: white; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: pale-grey; 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
} 
 

 
.service-inner:hover > .overlay { 
 
    position: absolute; 
 
    display: block; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    left: 0; 
 
    background-color: black; 
 
    opacity: 0.8; 
 
    z-index: 100; 
 
}

<div class="service-inner"> 
 
    <div class="overlay"></div> 
 
</div>

什麼會去了解這一點的最好方法是什麼？

Answer 1

在同一水平上添加div class="button"爲您的覆蓋，並給它相同的定位屬性，但較高的z-index，然後激活它懸停與您的overlay元素。 none`默認和`顯示：

.button { 
    display:none; 
} 

.container:hover > .button{ 
    position: absolute; 
    display: block; 
    top: 50%; 
    width:20%; 
    left: 40%; 
    background-color: green; 
    color:black; 
    z-index: 200; 
}