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

Question

I've following HTML code:
<div id="wrap2">
<div id="shape2">
<i class="ion ion-arrow-up-b"></i>
<i class="ion ion-arrow-up-b"></i>
<i class="ion ion-arrow-up-b"></i>
<i class="ion ion-arrow-up-b"></i>
</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 to do properly navigation with arrows? I mean that If user have mouseover arrow to move top #moveTop it should change background of that "white" border within angel x to y to color #eee.
There's example of my full code: https://jsfiddle.net/L9aeu4o3/6/

Answer 1

So if I'm right here, you want the arc behind the arrow to be highlighted?
To do that you need to place a div between your <a>tags, like 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 your CSS you are going to want to do the 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 a fiddly solution, but there's no jquery, just a pure CSS/HTML solution.
Here's the jsfiddle!