当我悬停按钮时，Fontawesome 箭头将被移动 [关闭]答案

【问题标题】：Fontawesome arrow will be moved when I hover the button [closed]当我悬停按钮时，Fontawesome 箭头将被移动 [关闭]
【发布时间】：2019-08-06 05:13:18
【问题描述】：

.b_btnWrapp .btn.btn_default:after {
  content: "\f054";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  top: 15px;
  right: 30px;
}

.b_btnWrapp .btn.btn_default:after:hover {
  content: "\f054";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  top: 15px;
  right: 18px;
}

&lt;button class="b_btnWrapp btn btn_default"&gt;CLick&lt;/button&gt;

我希望箭头使用 CSS AFTER 概念移动按钮的右侧。

【问题讨论】：

请正确格式化您的代码。请注意，您提供的代码也应该a Minimal, Complete, and Verifiable example。见how to ask
我不确定你想要什么效果，但你的代码有几个问题。如果您希望图标位于按钮内部，则按钮需要具有position:relative。要定位按钮本身，您需要.b_btnWrapp.btn.btn_default 作为选择器，不带空格。如果您想在悬停按钮时更改图标，请将:after:hover 替换为:hover::after。等等。但正如我所说，我不知道你在追求什么，所以我不能发布答案。

标签： javascript html css bootstrap-4

【解决方案1】：

您必须删除样式选择器中的退格键，因为它被解释为“.btn.btn_default 是 .b_btnWrapp 的子代”。

只需使用此代码，它就可以工作

.b_btnWrapp {
  position: relative;
  width: 100px;
  height: 30px;
}

.b_btnWrapp:after {
   font-family: "Font Awesome 5 Free";
   content: "\f061";
  font-weight: 900;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 15px;
  transition: all .2s;
}

.b_btnWrapp:hover:after {
  right: 5px;
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <button class="b_btnWrapp btn btn_default">CLick</button>
  </body>

</html>

另外请注意，我稍微简化了您的代码（删除了选择器中不必要的复杂性并删除了重复的代码）。如果您想在父级“坐标”中跟踪子级的absolute 位置，请不要忘记在父级上使用position:relative。并注意订单。 .element:hover:after 与 .element:after:hover 不同

【讨论】：

【解决方案2】：

尝试将其添加到您的风格中

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

【讨论】：

那行不通，因为多余的空间只是 OP 代码中的问题之一。另请参阅解决更多问题的其他答案。
所以你想在用户点击按钮时移动箭头

【解决方案3】：

我使用 javascript 切换了箭头。希望对您有所帮助！

var icon=document.querySelector("#btn i");

function toggleArrow(){
  var isLeftArrow=icon.classList.contains("fa-chevron-left");
  if(isLeftArrow){
    icon.classList.add("fa-chevron-right");
    icon.classList.remove("fa-chevron-left");
  }else{
    icon.classList.add("fa-chevron-left");
    icon.classList.remove("fa-chevron-right");
  }
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/solid.css" integrity="sha384-r/k8YTFqmlOaqRkZuSiE9trsrDXkh07mRaoGBMoDcmA58OHILZPsk29i2BsFng1B" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/fontawesome.css" integrity="sha384-4aon80D8rXCGx9ayDt85LbyUHeMWd3UiBaWliBlJ53yzm9hqN21A+o1pqoyK04h+" crossorigin="anonymous">

<button id="btn" class="b_btnWrapp btn btn_default" onclick="toggleArrow()">
  Click 
  <i class="fas fa-chevron-left"></i>
</button>

【讨论】：