CSS nth child box shadow hidden - html

Question

I am having trouble with the combination of the CSS selector :nth-child(...) and the box-shadow effect. The desired effect is as follows:
Even-numbered div elements in a container are given an alternating background color.
When the user hovers over one of the div elements, a box shadow is applied, giving the appearance of the "hovered" div "hovering" above the following div.
However, I am running into a problem. While the box shadow is applied to the "hovered" element, the effect is different for even-numbered div elements as opposed to odd-numbered ones. Essentially, the shadow of each even div overlaps the following odd div, while the shadow of each odd div is rendered behind the following even div.
This pen demonstrates the issue better: http://codepen.io/jtlovetteiii/pen/cEaLK
Here is the HTML snippet:
<div class="rows">
<div class="row"></div>
<div class="row"></div>
...
</div>
Here is the 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;
}
What am I missing?

Answer 1

The reason this is happening is because only your nth-child(even) divs have a background color. While it appears that the hover shadow is overlapping the other div, it really isn’t – it’s overlapping the parent’s background color.
You can fix the issue with a combination of position: relative and 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

Interesting. Not sure why that is happening, but I found a workaround. By adding a position: relative to the :hover elements, the hover effect is more consistent:
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;
}
It still doesn't look quite right, but maybe a margin offset would cause it to look a bit better.

Answer 3

JSFiddle
.row
{
height: 20px;
cursor: pointer;
position:relative;
z-index:1;
}
.row:hover
{
box-shadow: 0px 10px 10px #888888;
z-index:2;
}