HTML CSS 引导程序：当悬停在按钮上时，按钮中的图标不会改变颜色？

Question

当我在按钮上使用 hover 时，“访问”文本的颜色会相应更改，但亚马逊的图标不会。

必须直接将 hover 放在图标上以更改其颜色，但将鼠标悬停在按钮上的任何位置，然后需要更改图标的颜色。

我认为这与 class .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>

Answer 1

您可以添加此 css class .icon { color: inherit; } 并将.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>

Answer 2

您可以在 .btn:hover 之后添加.btn:hover i .btn:hover,用于 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>