悬停不使用字体真棒图标

Question

这是一些html和css。我需要在链接内悬停时显示箭头，但我不能这样做。我该如何解决？

.header-text-links a {
  display: block;
  width: 278px;
  height: 55px;
  padding: 0px 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #fab608;
  color: #fab608;
  font-size: 18px;
  font-family: "Futura Demi";
  text-transform: uppercase;
}

.header-text-links a .svg-inline--fa {
  display: none;
}

.header-text-links a:hover {
  color: white;
  background: #fab608;
  text-decoration: none;
  justify-content: space-around;
}

.header-text-links a:hover .header-text-links a .svg-inline--fa {
  display: block;
}

<script src="https://use.fontawesome.com/releases/v5.0.8/js/fontawesome.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/solid.js"></script>
<div class="header-text-links">
  <a class="header-text-links__works" href="#">Some text<i class="fas fa-arrow-right"></i></a>
</div>

另外，我尝试通过类 .fas 获取图标，.fa-arrow-right 甚至尝试获取路径标记，但结果是一样的

Answer 1

您使用了错误的选择器...试试 .header-text-links a:hover .svg-inline--fa

为什么？

为了更好地理解删除:hover一次，所以它看起来像

.header-text-links a .header-text-links a .svg-inline--fa

这意味着它将再次瞄准.svg-inline--fa内部.header-text-links a内部.header-text-links a

.header-text-links a .header-text-links a .svg-inline--fa

.header-text-links a {
  display: block;
  width: 278px;
  height: 55px;
  padding: 0px 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #fab608;
  color: #fab608;
  font-size: 18px;
  font-family: "Futura Demi";
  text-transform: uppercase;
}

.header-text-links a .svg-inline--fa {
  display: none;
}

.header-text-links a:hover {
  color: white;
  background: #fab608;
  text-decoration: none;
  justify-content: space-around;
}

.header-text-links a:hover .svg-inline--fa {
  display: block;
}