HTML CSS Bootstrap：悬停时，按钮中的图标不会改变颜色？答案

【问题标题】：HTML CSS Bootstrap: When hovered on, icon in button does not change color?HTML CSS Bootstrap：悬停时，按钮中的图标不会改变颜色？
【发布时间】：2020-07-03 02:06:03
【问题描述】：

当我将鼠标悬停在按钮上时，“访问”文本的颜色会相应改变，但亚马逊图标不会。

必须直接将鼠标悬停在图标上才能更改其颜色，但将鼠标悬停在按钮上的任意位置然后更改图标的颜色是需要的。

我认为这与 .middlered 类有些复杂，它只会将颜色更改为红色，因为该网站的原生颜色是绿色。

谢谢。 :)

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

【问题讨论】：

标签： html css

【解决方案1】：

您可以在.btn:hover, 之后添加.btn:hover i 用于CSS 代码以将图标颜色更改为白色。

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

【讨论】：

【解决方案2】：

您可以添加这个 css 类 .icon { color: inherit; } 并将类 icon 添加到像 <i class="icon fa fa-amazon" aria-hidden="true"></i> 这样的元素中。

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

【讨论】：

像魅力一样工作。谢谢