Partially fill object when hovering

Question

I have code below for a content cycle I have created with the help from some other Stack Overflow users. Is it possible to have the circular arrow fill up partially depending on what box your hovered on. Example: If the user hovers on box four (the bottom box) the circular arrow would fill up with a different color only up until that box. Is this possible to do with pure CSS only? If not would this be possible with vanilla JavaScript (no Jquery)? Anything helps, cheers.

.container .row {
  text-align: center;
  position: relative;
}

.row {
  position: relative;
}

.one {
  display: inline-block;
  background-color: #1f497d;
  width: 100px;
  height: 50px;
  border-width: 3px;
  border-style: solid;
  border-color: #ededed;
  border-radius: 7px;
  box-shadow: 0px 1px 5px #888888;
}

.one:hover {
  cursor:pointer;
  transform:scale(1.019);
  border-color:f4f4f4;
  background-color:#214d84;
  box-shadow: 0px 2px 9px #888888;
}

.two {
  display: inline-block;
  background-color: #1f497d;
  width: 100px;
  height: 50px;
  border-width: 3px;
  border-style: solid;
  border-color: #ededed;
  border-radius: 7px;
  box-shadow: 0px 1px 5px #888888;
  margin-left: -35px;
}

.two:hover {
  cursor:pointer;
  transform:scale(1.019);
  border-color:f4f4f4;
  background-color:#214d84;
  box-shadow: 0px 2px 9px #888888;
}

.three {
  display: inline-block;
  background-color: #1f497d;
  width: 100px;
  height: 50px;
  border-width: 3px;
  border-style: solid;
  border-color: #ededed;
  border-radius: 7px;
  box-shadow: 0px 1px 5px #888888;
  margin-left: -35px;
}

.three:hover {
  cursor:pointer;
  transform:scale(1.019);
  border-color:f4f4f4;
  background-color:#214d84;
  box-shadow: 0px 2px 9px #888888;
}

.four {
  display: inline-block;
  background-color: #1f497d;
  width: 100px;
  height: 50px;
  border-width: 3px;
  border-style: solid;
  border-color: #ededed;
  border-radius: 7px;
  box-shadow: 0px 1px 5px #888888;
}

.four:hover {
  cursor:pointer;
  transform:scale(1.019);
  border-color:f4f4f4;
  background-color:#214d84;
  box-shadow: 0px 2px 9px #888888;
}


.five {
  display: inline-block;
  background-color: #1f497d;
  width: 100px;
  height: 50px;
  border-width: 3px;
  border-style: solid;
  border-color: #ededed;
  border-radius: 7px;
  box-shadow: 0px 1px 5px #888888;
}

.five:hover {
  cursor:pointer;
  transform:scale(1.019);
  border-color:f4f4f4;
  background-color:#214d84;
  box-shadow: 0px 2px 9px #888888;
}

.six {
  display: inline-block;
  background-color: #1f497d;
  width: 100px;
  height: 50px;
  border-width: 3px;
  border-style: solid;
  border-color: #ededed;
  border-radius: 7px;
  box-shadow: 0px 1px 5px #888888;
}

.six:hover {
  cursor:pointer;
  transform:scale(1.019);
  border-color:f4f4f4;
  background-color:#214d84;
  box-shadow: 0px 2px 9px #888888;
}

.circle {
  display: inline-block;
  background-color: #006850;
  width: 85px;
  height: 85px;
  border-width: 3px;
  border-style: solid;
  border-color: #fefefe;
  border-radius: 50%;
  box-shadow: 0px 1px 5px #888888;
  margin-bottom: -15px;
}

.invisible {
  visibility: hidden;
  display: inline-block;
  background-color: #1f497d;
  width: 130px;
  height: 65px;
  border-width: 3px;
  border-style: solid;
  border-color: #d6d6d6;
  border-radius: 7px;
  box-shadow: 0px 1px 5px #888888;
}

.arrow {
  color: #d0d3d8;
  width: 250px;
  height: 250px;
  border: 17px solid;
  border-radius: 50%;
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: -1;
}

.arrow:before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  bottom: 0;
  top: -10px;
  left: 55px;
  background: #fff;
  transform: rotate(-120deg);
}

.arrow:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #d0d3d8;
  position: absolute;
  top: 0px;
  left: 40px;
  transform: rotate(-120deg);
}

<div class="container">
  <div class="row">
    <div class="one"></div>
  </div>
  <div class="row" style="margin-top:-15px;">
    <div class="six"></div>
    <div class="invisible"></div>
    <div class="two"></div>
  </div>
  <div class="row" style="margin-top:-15px;">
    <div class="invisible"></div>
    <div class="circle"></div>
    <div class="invisible"></div>
  </div>
  <div class="row" style="margin-top:-15px;">
    <div class="five"></div>
    <div class="invisible"></div>
    <div class="three"></div>
  </div>
  <div class="row">
    <div class="four"></div>
  </div>
  <div class="arrow"></div>
</div>

Answer 1

I have fully changed your layout.

Now everything works ok. And also, making changes in the position will be easier.

.container {
  width: 250px;
  height: 250px;
  position: absolute;
  top: 45px;
  left: 0px;
  right: 0px;
  margin: auto;
}

.ele, .arrow, .circle {
   position: absolute;
   left: 0px;
   right: 0px;
   top: 0px;
   bottom: 0px;
   margin: auto;
}

#one {
    transform: rotate(0deg) translateY(-130px) rotate(0deg);
}
#two {
    transform: rotate(60deg) translateY(-130px) rotate(-60deg);
}
#three {
    transform: rotate(120deg) translateY(-130px) rotate(-120deg);
}
#four {
    transform: rotate(180deg) translateY(-130px) rotate(-180deg);
}
#five {
    transform: rotate(240deg) translateY(-130px) rotate(-240deg);
}
#six {
    transform: rotate(300deg) translateY(-130px) rotate(-300deg);
}


.ele {
  display: inline-block;
  background-color: #1f497d;
  width: 100px;
  height: 50px;
  border-width: 3px;
  border-style: solid;
  border-color: #ededed;
  border-radius: 7px;
  box-shadow: 0px 1px 5px #888888;
}

.ele:hover {
  cursor:pointer;
  transform:scale(1.019);
  border-color:f4f4f4;
  background-color:#214d84;
  box-shadow: 0px 2px 9px #888888;
}

.circle {
  background-color: #006850;
  width: 85px;
  height: 85px;
  border-width: 3px;
  border-style: solid;
  border-color: #fefefe;
  border-radius: 50%;
  box-shadow: 0px 1px 5px #888888;
}

.arrow {
  color: #d0d3d8;
  width: 250px;
  height: 250px;
  border: 17px solid;
  border-radius: 50%;
  position: absolute;
  z-index: -3;
  left: -17px;
}

#two:hover ~ .arrow {
  border-top-color: red;
  transform: rotate(24deg);
}
#three:hover ~ .arrow {
  border-top-color: red;
  transform: rotate(66deg);
}
#four:hover ~ .arrow {
  border-top-color: red;
  border-right-color: red;
  transform: rotate(25deg);
}
#five:hover ~ .arrow {
  border-top-color: red;
  border-right-color: red;
  border-bottom-color: red;
  transform: rotate(26deg);
}
#six:hover ~ .arrow {
  border-top-color: red;
  border-right-color: red;
  border-bottom-color: red;
  transform: rotate(66deg);
}
#one:hover ~ .arrow {
  border-color: red;
}
#one:hover ~ .circle:after {
  border-top-color: red;
}


.circle:before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  bottom: 0;
  top: -96px;
  left: -36px;
  background: #fff;
  background-color: white;
  transform: rotate(-120deg);
  z-index: -1;
}

.circle:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #d0d3d8;
  position: absolute;
  top: -83px;
  left: -44px;
  transform: rotate(-120deg);
}

<div class="container">
    <div class="ele" id="one">1</div>
    <div class="ele" id="two">2</div>
    <div class="ele" id="three">3</div>
    <div class="ele" id="four">4</div>
    <div class="ele" id="five">5</div>
    <div class="ele" id="six">6</div>
    <div class="arrow"></div>
    <div class="circle"></div>
</div>