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>