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会显示阴影。调整味道：）

小提琴： https://jsfiddle.net/ehxsdjr8/7/

Answer 2

你在找这样的东西吗？

Fiddle

＆＃13;

$( 'div' ).hover(
  function() {
    $(this).addClass( "hey" );
    $('div').not(this).addClass( "heyho" );
  }, function() {
      $(this).removeClass( "hey" );
    $('div').not(this).removeClass( "heyho" );
  }
);

＆＃13;

div {
    background: #fff;
    margin: 0px auto;
    padding: 15px;
    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;
}
.hey{
    padding: 20px;
    box-shadow: 0px 0px 5px #666;
    margin: 15px auto;
    width: 350px;
}
.heyho {
    box-shadow: 0px 0px 5px #666;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>The box shadow from each div...</div>
<div>...should go under each other div.</div>
<div>The whole thing should look...</div>
<div>...like one big div with a shadow...</div>
<div>...unless you hover over one.</div>

＆＃13;

Answer 3

https://jsfiddle.net/ehxsdjr8/13

这里的技巧是为每个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;
}

它需要花很多时间才能让它看起来正确。

在CSS中将框架阴影放在兄弟姐妹后面

3 个答案: