在CSS中将框阴影放置在同级后面

我想要一系列没有边距的div，以及顶部和底部的框阴影，这样每个div的框阴影就不会与任何其他div重叠。我构建了一个展示我正在努力实现的目标和我现在拥有的东西的模型。这似乎是

z-index

可以使用的，但我不确定如何使用。

将所有DIV放在一个外部包装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。。。
…除非你停在一个上面。
外分区{
背景：#fff；
保证金：0px自动；
填充：0px；
宽度：300px；
光标：指针；
盒影：0px 0px 3px#999；
过渡：填充。1s缓进缓出，宽度。1s缓进缓出，方框阴影。1s缓进缓出；
}
外部分区：悬停{
盒影：无；
}
内分区{
填充：20px；
过渡：填充。1s缓进缓出，宽度。1s缓进缓出，方框阴影。1s缓进缓出；
}
内部分区：悬停{
填充：20px；
盒影：0px 0px 5px#666；
左边距：-20px
宽度：350px；
}

我对其进行了样式设置，这样当您将鼠标悬停在外部

DIV

上时，外部

DIV

上的框阴影就会消失，因此只有被悬停的内部

DIV

才会显示阴影。适应口味：）

小提琴：

---

你在找这样的东西吗

$（'div'）。悬停(
函数（）{
$（this.addClass（“嘿”）；
$（'div'）.not（this）.addClass（“heyho”）；
}，函数（）{
$（this.removeClass（“嘿”）；
$（'div'）.not（this）.removeClass（“heyho”）；
}
);
div{
背景：#fff；
保证金：0px自动；
填充：15px；
宽度：300px；
光标：指针；
盒影：0px 0px 3px#999；
过渡：填充。1s缓进缓出，宽度。1s缓进缓出，方框阴影。1s缓进缓出；
}
.嘿{
填充：20px；
盒影：0px 0px 5px#666；
利润率：15px自动；
宽度：350px；
}
你好{
盒影：0px 0px 5px#666；
}

每个div的长方体阴影。。。
…应该在其他部门下。
整个事情应该看起来。。。
…就像一个有阴影的大div。。。
…除非您将鼠标悬停在一个上方。

这里的技巧是为每个div添加多个阴影，并根据需要打开/关闭它们。在这种情况下，为第一个元素添加顶部阴影，并在仅悬停后添加第一个元素，并修改现有阴影，使其不位于元素上方

div {
    background: #fff;
    margin: 0px auto;
    padding: 15px;
    width: 300px;
    cursor: pointer;
    box-shadow: 0px 3px 3px #999;
    transition:
        padding .1s ease-in-out,
        width .1s ease-in-out,
        box-shadow .1s ease-in-out;
}
div:hover {
    padding: 20px;
    box-shadow: 0px 0px 5px #666;
    margin: 15px auto;
    width: 350px;
}
div:hover + div {
    box-shadow: 0px 3px 3px #999, 0px -3px 3px #999;
}
div:first-of-type {
    box-shadow: 0px 3px 3px #999, 0px -3px 3px #999;
}
div:first-of-type:hover {
    box-shadow: 0px 0px 5px #666;
}

要想让它看起来正确，需要花很多时间。
很接近，但不是很接近。兄弟姐妹div需要保留其长方体阴影并保持分组。不确定我是否理解。。。因此，当不悬停时，您希望每个div显示一个长方体阴影，但当悬停时，仅悬停的div有一个阴影？不，div应该覆盖所有同级的长方体阴影。在这种情况下，未覆盖的div将保留其分组和阴影，而悬停的div将弹出。不，在该示例中仍然存在重叠的框阴影。任何分区的任何部分都不应该有阴影。让我们来吧。不。目标是使任何div都没有重叠的框阴影。与其为悬停的div添加边距，不如将每个div嵌套在另一个div中。悬停应用于外部DIV，悬停时，添加填充而不是边距。这样，鼠标将在项目转换时继续位于项目上方。分层阴影效果应用于内部div。结果是上述解决方案的更平滑版本：