Why do the first five slices clockwise not hover but the rest do and is there any way to place a border to the left and right of each "slice"?

Question

Something that is bothering me, I triple-checked the code however I can't understand why the first five "slices" are not affected by the CSS in .Wheel:hover but the remaining seven slices are? The codes for each slice have the same structure unless I'm overlooking something. I am also wondering if it's possible to have a border for each slice? The only way I can think of is to create add phantom divs and line up the border for each slice.

.hold {
  position: absolute;
  width: 800px;
  height: 800px;
  clip: rect(0px,800px,800px,400px);
  z-index: 1;
}

.Wheel {
  position: absolute;
  width: 800px;
  height: 800px;
  clip: rect(0px,400px,800px,0px);
  border-radius: 400px;
  border: 2px solid #f2e0be;
  cursor: pointer;
}

.Wheel:hover {
  background-color: #333!important;
}

.WheelContainer {
  height: 800px;
  width: 100%;
  
  display: flex;
  justify-content: center;
  align-items: center;
}
     
#One .Wheel {
  background-color: transparent;
  transform:rotate(30deg);
}
     
#Two {
  transform:rotate(30deg);
}
     
#Two .Wheel {
  background-color: transparent;
  transform:rotate(30deg);
}

#Three {
  transform:rotate(60deg);
}
     
#Three .Wheel {
  background-color: transparent;
  transform:rotate(30deg);
}

#Four {
  transform:rotate(90deg);
}
     
#Four .Wheel {
  background-color: transparent;
  transform:rotate(30deg);
}
    
#Five {
  transform:rotate(120deg);
}
     
#Five .Wheel {
  background-color: transparent;
  transform:rotate(30deg);
}
    
#Six {
  transform:rotate(150deg);
}
     
#Six .Wheel {
  background-color: transparent;
  transform:rotate(30deg);
}

#Seven {
  transform:rotate(180deg);
}
     
#Seven .Wheel {
  background-color: transparent; 
  transform:rotate(30deg);
}

#Eight {
  transform:rotate(210deg);
}
     
#Eight .Wheel {
  background-color: transparent; 
  transform:rotate(30deg);
}

#Nine {
  transform:rotate(240deg);
}
     
#Nine .Wheel {
  background-color: transparent; 
  transform:rotate(30deg);
}

#Ten {
  transform:rotate(270deg);
}
     
#Ten .Wheel {
  background-color: transparent; 
  transform:rotate(30deg);
}

#Eleven {
  transform:rotate(300deg);
}
     
#Eleven .Wheel {
  background-color: transparent; 
  transform:rotate(30deg);
}

#Twelve {
  transform:rotate(330deg);
}
     
#Twelve .Wheel {
  background-color: transparent; 
  transform:rotate(30deg);
}

.centerpiece {
  width: 300px;
  height: 300px;
  background-color: #2E2E30;
  z-index: 3;
  border-radius: 300px;
  border: 2px solid #f2e0be;
}

<div class="WheelContainer">
  <div id="One" class="hold">
    <div class="Wheel"></div>
  </div>
  <div id="Two" class="hold">
    <div class="Wheel"></div>
  </div>
  <div id="Three" class="hold">
    <div class="Wheel"></div>
  </div>
  <div id="Four" class="hold">
    <div class="Wheel"></div>
  </div>
  <div id="Five" class="hold">
    <div class="Wheel"></div>
  </div>
  <div id="Six" class="hold">
    <div class="Wheel"></div>
  </div>
  <div id="Seven" class="hold">
    <div class="Wheel"></div>
  </div>
  <div id="Eight" class="hold">
    <div class="Wheel"></div>
  </div>
  <div id="Nine" class="hold">
    <div class="Wheel"></div>
  </div>
  <div id="Ten" class="hold">
    <div class="Wheel"></div>
  </div>
  <div id="Eleven" class="hold">
    <div class="Wheel"></div>
  </div>
  <div id="Twelve" class="hold">
    <div class="Wheel"></div>
  </div>
  <div class="centerpiece"></div>
</div>