將鼠標懸停在餅圖段上（純 CSS）

Question

我正在使用純 HTML 和 CSS 創建餅圖。 我想在使用純 CSS 懸停時更改每個餅圖段/切片的背景顏色。 純 Javascript 解決方案是可以接受的，但不是我們想要的。 我可以為此使用hover pseudoclass嗎？

HTML：

<div class="pieContainer">
  <div class="pieBackground"></div>
  <div id="pieSlice1" class="hold"><div class="pie"></div></div>
  <div id="pieSlice2" class="hold"><div class="pie"></div></div>
  <div id="pieSlice3" class="hold"><div class="pie"></div></div>
</div>

CSS：

.pieContainer {
  height: 150px;
  position: relative;
}

.pieBackground {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 100%;
  box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
}

.pie {
  transition: all 1s;
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 100%;
  clip: rect(0px, 75px, 150px, 0px);
}

.hold {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 100%;
  clip: rect(0px, 150px, 150px, 75px);
}

    #pieSlice1 .pie {
  background-color: #1b458b;
  transform:rotate(120deg);
}

#pieSlice2 {
  transform: rotate(120deg);
}

#pieSlice2 .pie {
  background-color: #0a0;
  transform: rotate(120deg);
}

#pieSlice3 {
  transform: rotate(240deg);
}

#pieSlice3 .pie {
  background-color: #f80;
  transform: rotate(60deg);
}

Answer 1

我根據每個切片的 id 更改了顏色。

 .pieContainer { height: 150px; position: relative; } .pieBackground { position: absolute; width: 150px; height: 150px; border-radius: 100%; box-shadow: 0px 0px 8px rgba(0,0,0,0.5); } .pie { transition: all 1s; position: absolute; width: 150px; height: 150px; border-radius: 100%; clip: rect(0px, 75px, 150px, 0px); } .hold { position: absolute; width: 150px; height: 150px; border-radius: 100%; clip: rect(0px, 150px, 150px, 75px); } #pieSlice1 .pie { background-color: #1b458b; transform:rotate(120deg); } #pieSlice2 { transform: rotate(120deg); } #pieSlice2 .pie { background-color: #0a0; transform: rotate(120deg); } #pieSlice3 { transform: rotate(240deg); } #pieSlice3 .pie { background-color: #f80; transform: rotate(60deg); } #pieSlice1 .pie:hover{ background-color: red; } #pieSlice2 .pie:hover{ background-color: yellow; } #pieSlice3 .pie:hover{ background-color: purple; }

 <div class="pieContainer"> <div class="pieBackground"></div> <div id="pieSlice1" class="hold"><div class="pie"></div></div> <div id="pieSlice2" class="hold"><div class="pie"></div></div> <div id="pieSlice3" class="hold"><div class="pie"></div></div> </div>