Javascript 当我悬停按钮时，箭头将被移动

.b_btnWrapp.btn.btn_默认值：之后{
内容：“\f054”；
字体系列：“字体真棒5免费”；
字号：900；
位置：绝对位置；
顶部：15px；
右：30px；
}
.b_btnWrapp.btn.btn_默认值：之后：悬停{
内容：“\f054”；
字体系列：“字体真棒5免费”；
字号：900；
位置：绝对位置；
顶部：15px；
右：18px；
}

---

单击
您必须删除样式选择器中的退格，因为它会被解释为“
.btn.btn\u default
是
.b\u btnwrap
的子项”

只要使用这个代码，它就会工作


.b_btnWrapp{
位置：相对位置；
宽度：100px；
高度：30px；
}
.b_btnwrap：之后{
字体系列：“字体真棒5免费”；
内容：“\f061”；
字号：900；
位置：绝对位置；
最高：50%；
转化：translateY（-50%）；
右：15px；
过渡：all.2s；
}
.b_btnwrap:悬停：之后{
右：5px；
}

你好，普朗克！
点击

尝试在您的样式中添加此选项

我使用javascript切换箭头。希望有帮助


var icon=document.querySelector（“#btn i”）；
函数toggleArrow（）{
var isLeftArrow=icon.classList.contains（“左V字形”）；
如果（isLeftArrow）{
icon.classList.add（“fa-chevron-right”）；
icon.classList.remove（“左前V形”）；
}否则{
icon.classList.add（“左前V形”）；
icon.classList.remove（“fa V形右”）；
}
}

点击
请正确设置代码格式。请注意，您给出的代码也应该是。看，我不确定你想要什么效果，但是你的代码有几个地方出了问题。如果您希望图标位于按钮内部，则按钮需要具有
位置：relative
。要定位按钮本身，需要为选择器设置
.b_btnWrapp.btn.btn_default
，不带空格。如果要在悬停按钮时更改图标，请将
：after:hover
替换为
：hover:：after
。但正如我所说，我不知道你在追求什么，所以我不能发布答案。这是行不通的，因为额外的空间只是OP代码中的一个问题。另请参阅解决更多问题的另一个答案。因此，当用户单击按钮时，您希望移动箭头
.b_btnWrapp.btn.btn_default:after {
      content: "\f054";
      font-family: 'Font Awesome 5 Free';
      font-weight: 900;
      position: absolute;
      top: 15px;
      right: 30px;
      cursor:pointer;
    }

    .b_btnWrapp.btn.btn_default:after:hover {
      top: 15px;
      right: 18px;
    }