悬停时编辑按钮

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