CSS第n个子框阴影隐藏答案

【问题标题】：CSS nth child box shadow hiddenCSS第n个子框阴影隐藏
【发布时间】：2013-08-15 14:32:42
【问题描述】：

CSS 选择器 :nth-child(...) 和 box-shadow 效果的组合有问题。想要的效果如下：

容器中的偶数 div 元素被赋予交替的背景颜色。
当用户将鼠标悬停在其中一个 div 元素上时，会应用一个框阴影，从而使“悬停”的 div 看起来“悬停”在以下 div 上方。

但是，我遇到了问题。虽然盒子阴影应用于“悬停”元素，但偶数 div 元素与奇数 div 元素的效果不同。本质上，每个偶数 div 的阴影与后面的奇数 div 重叠，而每个奇数 div 的阴影被渲染在后面的偶数 div 后面。

这支笔更好地说明了这个问题：http://codepen.io/jtlovetteiii/pen/cEaLK

这里是 HTML sn-p:

<div class="rows">
  <div class="row"></div>
  <div class="row"></div>
  ...
</div>

这是 CSS：

.rows
{
  background-color: #AAAAAA;
}

.rows .row:nth-child(even)
{
    background-color: #E2E2E2;
}

.row
{
  height: 20px;
  cursor: pointer;
}

.row:hover
{
  box-shadow: 0px 10px 10px #888888;
}

我错过了什么？

【问题讨论】：

如果你能发布你的css就好了！
想要的效果是哪一种？
@AaronMiler - 两种效果都是需要的。这个想法是让 div 元素具有交替的行颜色（就像您在表格数据中看到的那样），并且当用户将鼠标悬停在每一行上时，它会被赋予一个盒子阴影效果。如果可能的话，我希望同时应用这两种效果。

标签： html css css-selectors

【解决方案1】：

发生这种情况的原因是因为只有您的 nth-child(even) divs 有背景颜色。虽然看起来悬停阴影与另一个 div 重叠，但实际上并非如此——它与父级的背景颜色重叠。

您可以结合使用position: relative 和z-index 来解决此问题：

.rows {
  position: relative;
}

.row
{
  position: relative;
  height: 20px;
  cursor: pointer;
  background-color: #CCCCCC;
}

.row:nth-child(even)
{
  background-color: #E2E2E2;
}

.row:hover
{
  box-shadow: 0px 10px 10px #888888;
  z-index: 100;
}

CodePen demo

【讨论】：

谢谢！这就解释了为什么其他元素的阴影出现在它们的直系子元素“后面”。

【解决方案2】：

有趣。不确定为什么会发生这种情况，但我找到了一种解决方法。通过在:hover元素上添加position: relative，悬停效果更加一致：

http://codepen.io/anon/pen/hsKEf

.rows
{
  background-color: #AAAAAA;
}

.rows .row:nth-child(even)
{
    background-color: #E2E2E2;
}

.row
{
  height: 20px;
  cursor: pointer;
}

.row:hover
{
  box-shadow: 0px 10px 10px #888888;
  position: relative;
}

它看起来仍然不太正确，但也许边距偏移会使它看起来更好一点。

【讨论】：

【解决方案3】：

JSFiddle

.row
{
  height: 20px;
  cursor: pointer;
  position:relative;
  z-index:1;    
}

.row:hover
{
  box-shadow: 0px 10px 10px #888888;
  z-index:2;
}

【讨论】：