怎么做：从角圆导航悬停X到Y

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

所以，如果我在这里，你想要的箭头背后的弧线加以强调？

要做到这一点，你需要把你的<a>标签之间一个div，像这样：

看起来可怕，不是吗？

，并在你的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!