Question

目前我有一个带有悬停覆盖的容器，可以使整个容器变暗。我希望在中间的叠加层旁边显示一个编辑按钮。

＆＃13;

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

＆＃13;

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

＆＃13;

最好的方法是什么？

Answer 1

在与叠加层相同的级别添加div class="button"，并为其提供相同的定位属性但更高z-index，然后将其悬停，与您的overlay元素相同。< / p>

.button {
    display:none;
}

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

在悬停上编辑按钮

1 个答案: