CSS子鼠标悬停，旋转和剪辑：饼图问题

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> 

Answer 2

The other divs were on top of the first one, so you just need a z-index and it will work :)

 .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); z-index:1; } #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; } 

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