html - :hover on circle navigation from angle x to 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标签，像这样:

    <a href="#" id="moveTop">
<i class="ion ion-arrow-up-b"></i>
<div id="highlightTop"></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!