Partially fill an object when it hangs

Question

I have the code below for a content loop that I created using other Stack Overflow users. Is it possible for the round arrow to fill in part depending on which box you hung in. Example. If the user hovers over the fourth button (lower box), the circular arrow is filled with a different color only up to this field. Is this only possible for pure CSS? If it weren't possible with vanilla JavaScript (without jQuery)? Everything helps, welcomes.

.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 completely changed your layout.

Now everything is working fine. And also, making changes to the situation 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> 

Answer 2

If you don't mind using images for your arrow, you may have a different image for the arrow, depending on which checkbox vibrates, and then you can change the image via css:

 .one:hover { background: url("box1arrow.jpg"); // obviously, set this to whichever image you need }