Hover Over Pie Chart Segments (pure CSS)

Question

I am creating a pie chart using pure HTML and CSS. I want to change the color of the background of each pie chart segment/slice when hovered over using pure CSS. Pure Javascript solutions are acceptable, but not desired. Can I use the hover pseudoclass for this?

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

I changed color on id basis for each slice.

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