javascript - 悬停时编辑按钮

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 元素相同的位置。

.button {
    display:none;
}

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