html - How to do :hover on circle navigation from angle x to y -

i've following html code:

    <div id="wrap2">         <div id="shape2">             <a href="#" id="movetop"><i class="ion ion-arrow-up-b"></i></a>             <a href="#" id="moveright"><i class="ion ion-arrow-up-b"></i></a>             <a href="#" id="movedown"><i class="ion ion-arrow-up-b"></i></a>             <a href="#" id="moveleft"><i class="ion ion-arrow-up-b"></i></a>         </div>     </div> 

and following css code:

#shape2 {   width: 140px;   height: 140px;   position: fixed;   top: 60px;   left: 60px; }  #shape2:before {   content: " ";   position: absolute;   width: 100%;   height: 100%;   border-radius: 50%;   box-shadow: 0 0px 0 20px rgba(255,255,255,0.6); }  #movetop{     position: fixed;   top: 42px;   left: 80px;   color: #000;   width: 100px;   height: 40px;     text-align: center; }  #moveright{   position: fixed;   top: 110px;   left: 148px;   color: #000;   width: 100px;   height: 40px;     text-align: center;     -webkit-transform: rotate(90deg);     -moz-transform: rotate(90deg);     -o-transform: rotate(90deg);     -ms-transform: rotate(90deg);     transform: rotate(90deg); }  #movedown{   position: fixed;   top: 178px;   left: 80px;   color: #000;   width: 100px;   height: 40px;     text-align: center;     -webkit-transform: rotate(180deg);     -moz-transform: rotate(180deg);     -o-transform: rotate(180deg);     -ms-transform: rotate(180deg);     transform: rotate(180deg); }  #moveleft{   position: fixed;     top: 110px;   left: 12px;   color: #000;   width: 100px;   height: 40px;     text-align: center;     -webkit-transform: rotate(270deg);     -moz-transform: rotate(270deg);     -o-transform: rotate(270deg);     -ms-transform: rotate(270deg);     transform: rotate(270deg); } 

how navigation arrows? mean if user have mouseover arrow move top #movetop should change background of "white" border within angel x y color #eee.

there's example of full code: https://jsfiddle.net/l9aeu4o3/6/

so if i'm right here, want arc behind arrow highlighted?

to need place div between <a>tags, so:

    <a href="#" id="movetop"> <i class="ion ion-arrow-up-b"></i> <div id="highlighttop"></div> </a> 

looks horrible doesn't it?

and in css going want following:

#movetop:hover #highlighttop {     position: fixed;     top: 41px;     left: 41px;     width:140px;     height:140px;     border: 19px solid #eee;     min-width: 4em;     min-height: 4em;     border-radius: 50%;     border-left-color: transparent;     border-right-color: transparent;     border-bottom-color: transparent;     z-index: -1; } 

it's fiddly solution, there's no jquery, pure css/html solution.

here's jsfiddle!