css - 在 CSS 中将 box-shadow 放在兄弟后面

Question

我想要一系列没有边距和顶部和底部框阴影的 div，这样每个 div 的框阴影都不会与任何其他 div 重叠。我构建了一个 jsfiddle展示我正在努力实现的目标以及我现在拥有的。这似乎是 z-index 可以用来做的事情，但我不确定如何做。

Answer 1

将所有 DIV 放在一个外包装 DIV 中。对其应用框阴影，以及每个内部 DIV 的悬停状态。现在每个都可以独立控制。

<div class="outer">
  <div class="inner">The box shadow from each div...</div>
  <div class="inner">...should go under each other div.</div>
  <div class="inner">The whole thing should look...</div>
  <div class="inner">...like one big div with a shadow...</div>
  <div class="inner">...unless you hover over one.</div>
</div>

div.outer {
  background: #fff;
  margin: 0px auto;
  padding: 0px;
  width: 300px;
  cursor: pointer;
  box-shadow: 0px 0px 3px #999;
  transition: padding .1s ease-in-out, width .1s ease-in-out, box-shadow .1s ease-in-out;
}

div.outer:hover {
  box-shadow: none;   
}

div.inner {
  padding: 20px;
  transition: padding .1s ease-in-out, width .1s ease-in-out, box-shadow .1s ease-in-out; 
}

div.inner:hover {
  padding: 20px;
  box-shadow: 0px 0px 5px #666;
  margin-left: -20px
  width: 350px;
}

我设计了它的样式，当您将鼠标悬停在它上面时，外部 DIV 上的框阴影会消失，因此只有悬停在内部的 DIV 会显示阴影。调整口味:)

fiddle : https://jsfiddle.net/ehxsdjr8/7/