CSS 子悬停、旋转和翻转：饼图问题

Question

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

每个元素都有相同数量的重叠父 div，但其他两个元素工作得很好，所以这应该不是问题。整个情况只是尖叫着随机模糊的功能错误，但我什至不知道该怎么做 "hack-fix" 它。此行为已在 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>

CSS 子悬停、旋转和翻转：饼图问题

CSS Child Hover, Rotate & Clip: Pie Chart Issues

html

css

hover

clip