The issue I am facing is with a 3-section pie chart where all sections look virtually identical. However, the :hover effect does not trigger on the first section, but it works on the other two.
Each element has an equal number of overlapping parent divs, so that should not be causing the problem. It seems like a random and obscure bug related to a feature, but I am unsure how to fix it. This behavior has been observed in Chrome, Firefox, and Internet Explorer.
(I am aware that the top section is poorly positioned, I removed some extra fixes for simplicity to highlight the bug)
If you want to check out the full code, here is the link: codepen.io
Below is the 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>
And here is the 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;
}