html - CSS第n个子框阴影隐藏

Question

我在 CSS 选择器:nth-child(...)和 box-shadow 效果的组合方面遇到了问题。想要的效果如下：

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

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

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

这是 HTML 片段：

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

我错过了什么？

Answer 1

发生这种情况的原因是因为只有你nth-child(even) div的 s 有背景颜色。虽然看起来悬停阴影与另一个重叠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 演示

Answer 2

有趣的。不知道为什么会这样，但我找到了解决方法。position: relative通过在元素中添加 a :hover，悬停效果更加一致：

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

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

Answer 3

JSFiddle

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

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