Question

我有三个盒子，我用css

在鼠标上创建了一个阴影

<div class='item-box'>
   <p>first</p>
</div>
<div class='item-box'>
   <p>second</p>
</div>
<div class='item-box'>
   <p>third</p>
</div>

CSS

.item-box {
   width: 700px;
   background: #fff;
   border: 1px solid #ccc;
   margin-left:auto;
   margin-right:auto;
}

.item-box:hover {
   border: 1px solid #999;
   -webkit-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.4);
   -moz-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.4);
   box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.4);
}

JSFIDDLE

我希望鼠标悬停时第一个框的底部阴影出现在第二个框的上方（与第三个框中的第二个框相同）。我尝试过使用z-index，但没有成功。我怎么能这样做？感谢

Answer 1

根据以下内容更改CSS - 此处的关键部分是使用z-index更改商品的“分层”，将悬停的商品放在首位：

Demo Fiddle

.item-box {
    width: 700px;
    background: #fff;
    border: 1px solid #ccc;
    margin-left:auto;
    margin-right:auto;
    position:relative; /* apply a position so z-index will work */
    z-index:0; /* set z-index to zero for all items */
}

.item-box:hover {
    border: 1px solid #999;
    z-index:1; /* set z-index to 1 for hovered item, so it appears on top*/
    -webkit-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.4);
    -moz-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.4);
    box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.4);
}

相邻框上的框阴影行为

1 个答案:

Demo Fiddle