2 
<div class="row">
   some content

   <div class="info-box">
      some other content
   </div>
</div>


.row {
    float: left;
    margin-bottom: 1.5%;
    border: 1px solid #e3e3e3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    background-color: rgb(250, 250, 250);
    width: 685px;
    -webkit-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
    -moz-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
    -ms-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
    -o-border-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
    box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
}


.row:hover {
    background-color: rgb(240, 245, 245);
    -moz-box-shadow:    inset 0 0 5px #4d4d4d;
   -webkit-box-shadow: inset 0 0 5px #4d4d4d;
   box-shadow:         inset 0 0 5px #4d4d4d;

}

.info-box {
    position: relative; 
    border-left: 1px solid #e3e3e3;
    padding: 15px;
    width: 170px;
    font-size: 0.93em;
    color: #363636;
    float: left;
}

好的，我在行中有这个信息框。从 .row:hover 开始，我正在创建一个内部阴影。当您将鼠标悬停在行上时，信息框的左边框似乎显示在阴影顶部。

我的问题是你是否可以在边框顶部制作阴影。提前致谢。

注意：z-index 对我不起作用。

4

1 回答 1

1

当然它在最上面：孩子必须出现在父母之上，否则它会被它隐藏。要达到预期的效果，您必须将阴影应用到上方的元素，即.info-box. 您可以通过使用:after 伪元素来实现这一点，而无需额外的标记。

如果你看一下这个小提琴，我已经实现了基本命题——尽管你可能想要将边框移动到伪元素或调整尺寸以使其定位正确。

我所做的基本指南：

  1. 给出.rowCSS position: relative，以便我们可以放置与其相关的子级。
  2. 将规则中除背景属性之外的所有内容移至.row:hover新.row:hover:after规则。
  3. 添加content: ' '以强制显示伪元素。
  4. 添加定位、高度和宽度、顶部和左侧以使伪元素覆盖可用宽度。

编辑： Felipe在评论中指出，任何点击进入对象的尝试都.row将被:after元素拦截，但建议您可以使用指针事件设置pointer-events: none来缓解问题（在IE 和 Opera 以外的所有内容中）。我已经更新了我的示例以显示这一点。

于 2013-02-19T21:23:33.117 回答