问题与边框颜色悬停效果

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

更新如下，以防止它显示t相关的前

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