Question

我遇到了CSS选择器:nth-child(...)和盒子阴影效果组合的问题。期望的效果如下：

容器中偶数编号的div元素具有交替的背景颜色。
当用户将鼠标悬停在其中一个div元素上时，会应用一个框阴影，使“hovered”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只有背景颜色。虽然看起来悬停阴影与另一个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

Answer 2

有趣。不确定为什么正在发生，但我找到了解决方法。通过向position: relative元素添加: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;
}

CSS第n个子框阴影隐藏

3 个答案: