悬停不使用font-awesome图标

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

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

Answer 2

最佳解决方案 只改变css

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

＆＃13;

＆＃13;

.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: inline-block !important;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;