Question

我想在叠加层下面的各个div，按钮和h1上添加1的z-index。我试图使其类似于chrome开发人员工具：悬停功能。在开发工具中，当您将鼠标悬停在单个元素上时，它会突出显示，但在我的情况下，我希望它位于叠加层之上。在开发工具中，您可以突出显示没有父级突出显示的子级div，这也是我希望做的事情。

我试过搞乱不透明度，但是当它有一个嵌套的div时，嵌套的div会得到不透明度的两倍，我不想要那样。这是代码簿和代码......

http://codepen.io/jareko999/pen/wWGpwz

HTML

<div class="cover">
</div>

<h1 class="title">Here's your website</h1>
<div class="container">
  <div class="box">
    <button>The Button</button>
  </div>
  <div class="box">
    <button>The Button</button>
  </div>
  <div class="box">
    <button>The Button</button>
  </div>
  <div class="box">
    <button>The Button</button>
  </div>
  <div class="box">
    <button>The Button</button>
  </div>
  <div class="box">
    <button>The Button</button>
  </div>
</div>

CSS

body {
  margin: 0;
  width: 100%;
  height: 100%;
}

.cover {
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: rgba(0,0,0,.4);
  z-index: 1;
}

.title {
  text-align: center;
  width: 60%;
  margin: 40px auto;
}

.container {
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.box {
  width: 300px;
  height: 200px;
  margin: 10px;
  background: url("https://static.pexels.com/photos/38155/pexels-photo-38155.jpeg") center center no-repeat;
  background-size: cover;
  display: flex;
}

button {
  -webkit-appearance: none;
  border: none;
  box-shadow: none;
  background: #276cd6;
  color: white;
  font-weight: 600;
  font-size: .8em;
  padding: 16px 24px;
  border-radius: 10px;
  margin: auto;
}

：像Chrome开发者工具一样的悬停功能

0 个答案: