2

我想要一系列没有边距的 div 以及顶部和底部的盒子阴影，这样每个 div 的盒子阴影不会与任何其他 div 重叠。我已经构建了一个jsfiddle来展示我正在努力实现的目标以及我现在拥有的东西。这似乎z-index可以用于，但我不知道如何。

4

3 回答 3

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/

于 2015-06-11T16:44:47.470 回答
0

你在寻找这样的东西吗？

小提琴

$( 'div' ).hover(
  function() {
    $(this).addClass( "hey" );
    $('div').not(this).addClass( "heyho" );
  }, function() {
      $(this).removeClass( "hey" );
    $('div').not(this).removeClass( "heyho" );
  }
);
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;
}
<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>

于 2015-06-11T16:58:18.503 回答
0

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

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

于 2015-06-11T18:31:45.520 回答