CSS兒童懸停，旋轉和剪輯：餅圖問題

Question

我有一個3節餅圖，其中所有3個部分幾乎完全相同，但懸停不會在第一部分觸發，而在另外兩個部分也會觸發。

每個元素都有相同數量的重疊父div，但其他兩個完全正常，所以不應該是問題。這整個情況只是尖叫着一些隨機模糊的功能缺陷，但我不知道該怎麼做才能「修復」它。此問題已在Chrome中，FF和IE瀏覽器中觀察到

（是的，我知道的頂部被定位不好，我刪除了額外的修復簡單強調的bug）

全碼： 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是在第一個的頂部，所以你只需要一個z索引，它會工作:)

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