如何在悬停时向右移动箭头？答案

【问题标题】：how to move arrow to right on hover?如何在悬停时向右移动箭头？
【发布时间】：2019-05-25 00:45:58
【问题描述】：

如何使箭头的填充在悬停时向右移动箭头？也就是箭头从文本中向右移动，当hover消失时，它又回到了原来的位置。

#next {
  cursor: pointer;
  position: absolute;
  float: right;
  top: 50%;
  width: auto;
  color: #383736;
  font-weight: bold;
  font-size: 20px;
  user-select: none;
  right: 75px;
  transition:         0.2s ease-in;
  -o-transition:      0.2s ease-in;
  -ms-transition:     0.2s ease-in;
  -moz-transition:    0.2s ease-in;
  -webkit-transition: 0.2s ease-in;
}

#next:before{
  content:"Next";
  position:absolute;
  color:#383736;
  right: 50%;
  opacity: 0;
  -webkit-transition: all 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
  padding-right: 5px;
}

#next:hover:before{
  right:100%;
  transition:         0.6s ease-in;
  -o-transition:      0.6s ease-in;
  -ms-transition:     0.6s ease-in;
  -moz-transition:    0.6s ease-in;
  -webkit-transition: 0.6s ease-in;
  opacity:1;
}

&lt;a  id="next"&gt;&lt;span class="arrow"&gt;&amp;#10230;&lt;/span&gt;&lt;/a&gt;

【问题讨论】：

标签： html css hover css-transitions

【解决方案1】：

试试这个...

#next {
  cursor: pointer;
  position: absolute;
  float: right;
  top: 50%;
  width: auto;
  color: #383736;
  font-weight: bold;
  font-size: 20px;
  user-select: none;
  right: 75px;
  transition:         0.2s ease-in;
  -o-transition:      0.2s ease-in;
  -ms-transition:     0.2s ease-in;
  -moz-transition:    0.2s ease-in;
  -webkit-transition: 0.2s ease-in;
}

#next:before{
  content:"Next";
  position:absolute;
  color:#383736;
  left: 50%; // <--- here
  opacity: 0;
  -webkit-transition: all 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
  padding-right: 5px;
}

#next:hover:before{
  left:100%; // <--- here
  transition:         0.6s ease-in;
  -o-transition:      0.6s ease-in;
  -ms-transition:     0.6s ease-in;
  -moz-transition:    0.6s ease-in;
  -webkit-transition: 0.6s ease-in;
  opacity:1;
}

【讨论】：

为了什么，我想在悬停时移动箭头，而不是改变文本的位置
你能告诉我更具体的吗？当鼠标悬停在文本上时，然后用箭头替换？让我把图像作为你的目标。

【解决方案2】：

您可以在箭头元素（跨度）上使用翻译：

#next {
  cursor: pointer;
  position: absolute;
  float: right;
  top: 50%;
  width: auto;
  color: #383736;
  font-weight: bold;
  font-size: 20px;
  user-select: none;
  right: 75px;
  transition: 0.2s ease-in;
}

#next:before {
  content:"Next";
  position:absolute;
  color:#383736;
  right: 50%;
  opacity: 0;
  transition: 0.6s ease-in;
  padding-right: 5px;
}

#next:hover:before {
  opacity: 1;
}
#next span {
  display: inline-block;
  transition: 0.6s ease-in;
}
#next:hover span {
  transform: translateX(50%);
}

&lt;a  id="next"&gt;&lt;span class="arrow"&gt;&amp;#10230;&lt;/span&gt;&lt;/a&gt;

【讨论】：