Как сделать: парить на окружности навигации от угла х к у

Question

я следующий HTML-код:

<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> 

И следующий код CSS:

#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); 
} 

Как сделать правильно навигации со стрелками? Я имею в виду, что если у пользователя есть стрелка курсора мыши для перемещения вверх #moveTop, это должно изменить фон этой «белой» границы внутри ангела x до y до цвета #eee.

Там в пример моего полного кода: https://jsfiddle.net/L9aeu4o3/6/

Answer 1

Так что, если я здесь, вы хотите, чтобы дуга за стрелку, чтобы быть выделены?

Для этого вам нужно разместить DIV между вашими <a> тегами, например, так:

выглядит ужасно, не так ли?

и в вашем CSS вы собираетесь хочешь сделать следующее:

#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; 
} 

Это неудобное решение, но нет JQuery, просто чистое CSS/HTML решения.

Вот jsfiddle!