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>