I am encountering a challenge with using the CSS selector :nth-child(...) in combination with the box-shadow effect. The intended outcome is as follows:
- The even-numbered div elements within a specific container should have alternating background colors.
- When a user hovers over one of these div elements, a box shadow is supposed to be applied, creating the illusion that the "hovered" div is floating above the next div.
However, I am facing an issue. While the box shadow does appear on the hovered element, it behaves differently for even-numbered divs compared to odd-numbered ones. Essentially, the shadow of each even div overlaps onto the succeeding odd div, whereas the shadow of each odd div is positioned behind the following even div.
You can see this problem clearly in action through this codepen link: http://codepen.io/jtlovetteiii/pen/cEaLK
Below is an excerpt of the HTML code snippet being used:
<div class="rows">
<div class="row"></div>
<div class="row"></div>
...
</div>
And here is the corresponding CSS style:
.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;
}
Can you spot what might be causing this issue?