html - CSS 子级悬停、旋转和剪辑 : Pie Chart Issues

Question

我有一个 3 部分饼图，其中所有 3 个部分几乎相同，但 :hover 不会在第一部分触发，但会在其他两个部分触发。

每个元素都有相同数量的重叠父 div，但其他两个元素工作得很好，所以这应该不是问题。整个情况只是尖叫着随机模糊的功能错误，但我什至不知道该怎么做才能“破解”它。这种行为已在 Chrome、FF 和 IE 中观察到

(是的，我知道顶部位置不好，为了简​​单起见，我删除了额外的修复以强调错误)

完整代码: 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

为此使用z-index

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