CSS子鼠標懸停，旋轉和剪輯：餅圖問題

Question

我有一個3部分餅圖，其中所有3個部分實際上都相同，但：hover不會在第一部分觸發，而在其他兩個部分觸發。

每個元素都有相同數量的重疊父div，而其他兩個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> 

Answer 2

其他div位於第一個div的頂部，因此您只需要一個z-index即可使用：)

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