fa-fontのアイコンをhover時に色を変えたい

Question

前提・実現したいこと

デフォルトでは color: #777; のinstagramのアイコンをhoverした時だけグラデーションカラーに変更したいです。

・デフォルト

・hover時

該当のソースコード

<i class="fab fa-twitter-square fa-2x"></i>
<i class="fab fa-instagram instagram fa-2x"></i>            

.instagram{
  cursor: pointer;
  background: pink;
  background: -webkit-radial-gradient(33% 100% circle, #515ECF 4%, #9B36B7 30%, #D92E7F 62%, #F15245 85%, #FED373);
  background: radial-gradient(circle at 33% 100%, #ff3be7 4%, #ff3be7 28%, #03ffe8 62%, #F15245 85%, #FED373);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.fa-instagram, .fa-twitter-square{
  color: #777;
  width: 28px;
  height: 28px;
}

.fa-twitter-square:hover{
  color: #1DA1F2;
  transition: .98s;
}

.fa-instagram:hover{
  background: -webkit-radial-gradient(33% 100% circle, #FED373 4%, #F15245 30%, #D92E7F 62%, #9B36B7 85%, #515ECF);
  background: radial-gradient(circle at 33% 100%, #FED373 4%, #F15245 30%, #D92E7F 62%, #9B36B7 85%, #515ECF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

試したこと

https://codepen.io/immad-hamid/pen/jVNvQOのコードを実装してみました。

仕組み的には恐らくbackgroundをグラデーションにしてアイコン部分を透過するように読めるのですがうまく実装できません。

お力添えください。お願いします

Answer 1

hoverしていない時にも色がついているのが問題ということですよね？
色を付けている部分を削除すればいいのではないかと思います。

Comments

[退会済みユーザー]

いえ。hoverする前はデフォルトのカラーの状態で、hoverしてもデフォルトのカラーのままになります

[Lhankor_Mhy]

ご提示のコードを試してみましたが、当方の環境では問題なくグラデーションになっています。

[退会済みユーザー]

こちらが載せたコードでしょうか？
それともcodepenのコードでしょうか？

該当するコードのみ単体で再現してみましたが
自分の環境だと何故かhover時に色が変わらないです
ブラウザ：firefox 91.0.2
OS：Big Sur 11.0.1

[Lhankor_Mhy]

faipaspijfasjf さんが載せたコードの方です。
ご提示いただいていない部分に原因があるか、環境の問題かもしれませんね。

[退会済みユーザー]

・ ご提示いただいていない部分に原因があるか、環境の問題かもしれませんね。

→前者のことも考慮してシンプルな構成でも色が変わらなかったので環境のせいかもしれません。。

[Lhankor_Mhy]

ご提示のコードを再現してみました。
当方の環境では、以下のページで問題が起きませんでした。

https://jsfiddle.net/Lhankor_Mhy/ds6gkeq0/

[退会済みユーザー]

ありがとうございます。

本当ですね、、だとするとブラウザ何かしらの問題が原因でhoverしても色が変わらないようです。。
わざわざありがとうございます。
確かにhoverで色がかわることをjsfiddle.net上で確認できましたので一旦解決済みにさせていただきます。

[Lhankor_Mhy]

かしこまりました。
faipaspijfasjf さんがお試しになったコード全体をご提示いただければば、もう少し何かわかることがあるのかもしれませんが……