当我将鼠标悬停在按钮上时，文本“访问”的颜色会适当地改变，但亚马逊的图标不会改变。
一个必须直接悬停在图标上改变它的颜色，但是悬停在按钮上的任何地方，然后图标的颜色的改变是期望的。
我认为这与.middlered类有关，因为站点的原生颜色是绿色，所以它只用于将颜色更改为红色。
谢谢。
null
* {
text-align: center;
color: rgb(50, 185, 176);
font-size: 1.03em;
}
.middlered * {
color: rgba(211, 0, 0, 0.938);
}
/* FOLLOWING LINE IS THE PROBLEM? */
.btn :hover{
color: white;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row gallery">
<div class="column">
<div class="card border-0">
<a href="SOMELINK"><img src="SOMEIMG.jpg" class="card-img-top" alt="Bla Bla Bla" ></a>
<div class="card-body">
<h5 class="card-title">SOME INFO</h5>
<p class="card-text">SOME MORE INFO.</p>
<!-- FOLLOWING LINE IS THE PROBLEM? -->
<a id="bottom" target="_blank" href="SOMELINK" class="btn btn-outline-danger btn-sm middlered pl-4 pr-4">Visit <i class="fa fa-amazon" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>null
您可以添加此css类.icon{color:inherit；}，并将类icon添加到元素中，如。
null
* {
text-align: center;
color: rgb(50, 185, 176);
font-size: 1.03em;
}
.middlered * {
color: rgba(211, 0, 0, 0.938);
}
/* FOLLOWING LINE IS THE PROBLEM? */
.btn:hover {
color: white;
}
.icon {
color: inherit;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row gallery">
<div class="column">
<div class="card border-0">
<a href="SOMELINK"><img src="SOMEIMG.jpg" class="card-img-top" alt="Bla Bla Bla" ></a>
<div class="card-body">
<h5 class="card-title">SOME INFO</h5>
<p class="card-text">SOME MORE INFO.</p>
<!-- FOLLOWING LINE IS THE PROBLEM? -->
<a id="bottom" target="_blank" href="SOMELINK" class="btn btn-outline-danger btn-sm middlered pl-4 pr-4">Visit <i class="icon fa fa-amazon" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
您可以在.btn:hover之后添加.btn:hoveri，以便CSS代码将图标颜色更改为白色。
null
* {
text-align: center;
color: rgb(50, 185, 176);
font-size: 1.03em;
}
.middlered * {
color: rgba(211, 0, 0, 0.938);
}
/* FOLLOWING LINE IS THE PROBLEM? */
.btn:hover, /* remove the space between .btn and :hover */
.btn:hover i { /* Add this line to change the color of the icon as well */
color: white;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row gallery">
<div class="column">
<div class="card border-0">
<a href="SOMELINK"><img src="SOMEIMG.jpg" class="card-img-top" alt="Bla Bla Bla"></a>
<div class="card-body">
<h5 class="card-title">SOME INFO</h5>
<p class="card-text">SOME MORE INFO.</p>
<!-- FOLLOWING LINE IS THE PROBLEM? -->
<a id="bottom" target="_blank" href="SOMELINK" class="btn btn-outline-danger btn-sm middlered pl-4 pr-4">Visit <i class="fa fa-amazon" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>