テキストにカーソルをあてたときに、アイコンも一緒に色が変わるようにしたい

Question

前提・実現したいこと

テキストにカーソルをあてたときに、アイコンも一緒に色が変わるようにしたい

発生している問題

 <a href="#contact" class="btn">SEND MESSAGE <i class="fas fa-external-link-alt"></i></a>

のコードに対して、

.btn:hover {
      color: #f5576c;
	  background-color:#fff;
	  opacity:.5;
  }

とCSSをあてていますが、カーソルをあてたときに、テキストだけ色が変わり、アイコンの色が変わりません。

試したこと

.btn .fas {
      color: #fff;
      margin-left: 5px;
  }

.btn:hover {
      color: #f5576c;
	  background-color:#fff;
	  opacity:.5;
  }

としてみましたが、テキストとアイコンそれぞれにカーソルをあてたときのみのCSSの適用になるため、テキストにカーソルをあてたときに、アイコンも一緒に色が変わるようにはなっていません。

Answer 1

.btn .fas に color を指定しているのでそれが優先されます。
これを削除すれば、テキストとアイコンは同時に色が変わります。

.btn .fas {
/*      color: #fff; */
      margin-left: 5px;
  }
.btn:hover {
      color: #f5576c;
      background-color:#fff;
      opacity:.5;
  }

---

コメント

それを試してみたのですが、やはり、テキスト部分しか適用されません

他の部分でアイコンの色を設定しているのでしょう。
さがして削除してください。
見つからない場合は、下記のCSSを追加してみてください。

.btn:hover .fas{
      color: #f5576c!important;
  }

Comments

[ichi2019]

ありがとうございます????それを試してみたのですが、やはりテキスト部分しかhoverが効いていません????

[hatena19]

呈示されてい以外のところで、アイコンの色を設定しているのでしょう。
それを確認してください。

[ichi2019]

本当にありがとうございます＾＾最高です！できました！即レス感謝いたします！本当にありがとうございました＾＾

Answer 2

どこか他の場所でもアイコンの色が設定されているのではないでしょうか？
そちらが優先されているのではないかと思われます。
『!important』は使ってみましたか？

.btn:hover {
      color: #f5576c  !important;
      background-color:#fff;
      opacity:.5;
  }

Comments

[ichi2019]

.btn:hover .fas{
color: #f5576c!important;
}
で解決いたしました！ご回答ありがとうございました＾＾感謝感謝です＾＾

Answer 3

それを試してみたのですが、やはり、テキスト部分しか適用されません????