CSS Child Hover, Rotate & Clip: Pie Chart Issues

Question

I have a 3-section pie chart where all 3 sections are virtually identical, yet :hover does not trigger on the first section, and does on the other two.

There is an identical number of overlapping parent divs for every element, yet the other two work perfectly fine, so that shouldn't be the issue. This entire situation just screams random obscure feature bug, but I have no idea what to even try to do to "hack-fix" it. This behavior has been observed in Chrome, FF and IE

(yes, I know the top section is poorly positioned, I removed the extra fixes for simplicity to emphasize the bug)

Full code: codepen.io

HTML:

<div class="colors">
            <div class="clip" id="color1"><div class="section" id="color1Actual"></div></div>
            <div class="clip" id="color2"><div class="section" id="color2Actual"></div></div>
            <div class="clip" id="color3"><div class="section" id="color3Actual"></div></div>
        </div>

CSS:

.colors {
    width: 131px;
    height: 131px;
    margin-top: 32%;
    margin-left: 12%;
    border-radius: 50%;
}

.colors div {
    position: absolute;
    height: 132px;
    width: 132px;
    border-radius: 50%;
}

#color1Actual {
    background-color: #ADD8E6;
    transform: rotate(60deg);
}

#color1, #color1Actual {
    clip: rect(0px, 132px, 66px, 0px);
}

#color1Actual:hover {
    background-color: #0000FF;
}

#color2Actual {
    background-color: #ADD8E6;
    transform: rotate(60deg);
}

#color2, #color2Actual {
    clip: rect(0px, 132px, 132px, 66px);
}

#color2Actual:hover {
    background-color: #0000FF;
}

#color3Actual {
    background-color: #FFFFE0;
    transform: rotate(-60deg);
}

#color3, #color3Actual {
    clip: rect(0px, 66px, 132px, 0px);
}

#color3Actual:hover {
    background-color: #FFFF00;
}

Answer 1

Use z-index for this

.colors {
    width: 131px;
    height: 131px;
    margin-top: 12%;
    margin-left: 12%;
    border-radius: 50%;
}

.colors div {
    position: absolute;
    height: 132px;
    width: 132px;
    border-radius: 50%;
}

#color1Actual {
    background-color: #ADD8E6;
    transform: rotate(60deg);
    z-index: 1;
}

#color1, #color1Actual {
    clip: rect(0px, 132px, 66px, 0px);
}

#color1Actual:hover {
    background-color: #0000FF;
}

#color2Actual {
    background-color: #ADD8E6;
    transform: rotate(60deg);
    z-index: 2;
}

#color2, #color2Actual {
    clip: rect(0px, 132px, 132px, 66px);
}

#color2Actual:hover {
    background-color: #0000FF;
}

#color3Actual {
    background-color: #FFFFE0;
    transform: rotate(-60deg);
    z-index: 3;
}

#color3, #color3Actual {
    clip: rect(0px, 66px, 132px, 0px);
}

#color3Actual:hover {
    background-color: #FFFF00;
}

<div class="colors">
            <div class="clip" id="color1"><div class="section" id="color1Actual"></div></div>
            <div class="clip" id="color2"><div class="section" id="color2Actual"></div></div>
            <div class="clip" id="color3"><div class="section" id="color3Actual"></div></div>
        </div>