边框颜色悬停效果问题

Question

我试图为图标设置悬停效果。当光标靠近该图标时，该图标的边框颜色将显示，但应在半径的一半范围内。就我而言，我不知道该怎么做，也不知道我的代码有什么问题。 如果有人知道实现此目标的方法，这对我会非常有帮助。
供您参考，我在这里上传了我期望的输出图像。

.round-right-arrow {
  border-radius: 24px;
  background:  white;
  width: 40px;
  height: 40px;
  border-color: transparent;
}
.roundbtn {
  background: none;
  position: relative;
}
.roundbtn::before, .roundbtn::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
}
.spin {
  width: 37px;
  height: 37px;
  padding: 0;
}
.spin::before {
  border: 2px solid transparent;
}
.spin:hover::before {
  border-top-color: #ec7f4a;
  border-right-color: #ec7f4a;
  border-bottom-color: #ec7f4a;
  border-left-color: #ec7f4a;
  transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
}
.circle::before, .circle::after {
  border-radius: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <div class="spin circle roundbtn">
<button class="round-right-arrow">
  <i class="fa fa-arrow-right  " aria-hidden="true"></i>
</button>
  </div>

Answer 1

使用transform:rotate(45deg)并删除right and bottom border

.round-right-arrow {
  border-radius: 24px;
  background:  white;
  width: 40px;
  height: 40px;
  border-color: transparent;
}
.roundbtn {
  background: none;
  position: relative;
}
.roundbtn::before, .roundbtn::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  transform:rotate(45deg);
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
}
.spin {
  width: 37px;
  height: 37px;
  padding: 0;
}
.spin::before {
  border: 2px solid #f2f2f2;
}
.spin:hover::before {
  border-top-color: #ec7f4a;
  border-left-color: #ec7f4a;
  transition: border-left-color 0.25s linear, border-top-color 0.25s linear 0.1s;
}
.circle::before, .circle::after {
  border-radius: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <div class="spin circle roundbtn">
<button class="round-right-arrow">
  <i class="fa fa-arrow-right  " aria-hidden="true"></i>
</button>
  </div>

Answer 2

以下CSS似乎确定了显示边框的位置：

.spin:hover::before {
  border-top-color: #ec7f4a;
  border-right-color: #ec7f4a;
  border-bottom-color: #ec7f4a;
  border-left-color: #ec7f4a;
  transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
}

如下更新，以防止其显示在顶部

.round-right-arrow {
  border-radius: 24px;
  background:  white;
  width: 40px;
  height: 40px;
  border-color: transparent;
}
.roundbtn {
  background: none;
  position: relative;
}
.roundbtn::before, .roundbtn::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
}
.spin {
  width: 37px;
  height: 37px;
  padding: 0;
}
.spin::before {
  border: 2px solid transparent;
}
.spin:hover::before {
  border-top-color: #ec7f4a;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: #ec7f4a;
  transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
}
.circle::before, .circle::after {
  border-radius: 100%;
  transform: rotate(225deg);
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <div class="spin circle roundbtn">
<button class="round-right-arrow">
  <i class="fa fa-arrow-right  " aria-hidden="true"></i>
</button>
  </div>

Answer 3

这就是您想要的吗？

.round-right-arrow {
  border-radius: 24px;
  background:  white;
  width: 40px;
  height: 40px;
  border-color: transparent;
}
.roundbtn {
  background: none;
  position: relative;
}
.roundbtn::before, .roundbtn::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
}
.spin {
  width: 37px;
  height: 37px;
  padding: 0;
}
.spin::before {
  border: 2px solid transparent;
}
.spin:hover::before {
  border-top-color: #ec7f4a;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: #ec7f4a;
  transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
}
.circle::before, .circle::after {
  border-radius: 100%;
  transform: rotate(225deg);
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

 <div class="spin circle roundbtn">
<button class="round-right-arrow">
  <i class="fa fa-arrow-right  " aria-hidden="true"></i>
</button>
  </div>

Answer 4

为border-top-color和border-top-color添加了透明色，并使用transform: rotate(315deg);对其进行了旋转。谢谢

.round-right-arrow {
  border-radius: 24px;
  background:  white;
  width: 40px;
  height: 40px;
  border-color: transparent;
}
.roundbtn {
  background: none;
  position: relative;
}
.roundbtn::before, .roundbtn::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
}
.spin {
  width: 37px;
  height: 37px;
  padding: 0;
}
.spin::before {
  border: 2px solid transparent;
}
.spin:hover::before {
  border-top-color: TRansparent;
  border-right-color: TRansparent;
  border-bottom-color: #ec7f4a;
  border-left-color: #ec7f4a;
  transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
      transform: rotate(315deg);
}
.circle::before, .circle::after {
  border-radius: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <div class="spin circle roundbtn">
<button class="round-right-arrow">
  <i class="fa fa-arrow-right  " aria-hidden="true"></i>
</button>
  </div>