質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.37%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

hover

これは、HTMLの 擬似クラス[hover]に関するタグです。Hoverは与えられた要素へマウスカーソルを置くことを意味します。また、タッチ可能なデバイスでユーザーが要素へタッチすることをHoverと呼ぶ場合もあります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

6597閲覧

FontAwesomeにcolorを指定するとホバーしなくなる

Hisato

総合スコア18

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

hover

これは、HTMLの 擬似クラス[hover]に関するタグです。Hoverは与えられた要素へマウスカーソルを置くことを意味します。また、タッチ可能なデバイスでユーザーが要素へタッチすることをHoverと呼ぶ場合もあります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

1クリップ

投稿2019/01/24 04:40

編集2019/01/24 05:09
コード ```### FontAwesomeのアイコンにホバーした時に別の色をつけたい FontAwesomeにcolorの指定をするとホバーしなくなります。カラーを指定する前はホバーしています。 ```HTML5 <!-- Connect --> <div class="container-fluid padding"> <div class="row text-center padding"> <div class="col-12"> <h2>Connect</h2> </div> <div class="col-12 social padding"> <a href="#"><i class="fab fa-facebook"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-google-plus-g "></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-youtube"></i></a> </div> </div> </div>

CSS3

1.fa-facebook { 2 color: #3b5998; 3} 4.fa-twitter { 5 color: #00aced; 6} 7.fa-google-plus-g { 8 color: #dd4b39; 9} 10.fa-instagram { 11 color: #517fa4; 12} 13.fa-youtube { 14 color: #bb0000; 15} 16.fa-facebook:hover, 17.fa-twitter:hover, 18.fa-google-plus-g:hover, 19.fa-instagram:hover, 20.fa-youtube:hover, { 21 color: #d5d5d5; 22}

補足情報(FW/ツールのバージョンなど)

HTML5
CSS3
FontAwesome: v5.0.8

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/01/24 04:49

コードはマークダウンのcode機能を利用して提示してください。 画像(動画)で提示されても正しく再現確認できません。
azuapricot

2019/01/24 04:49

可能ならソースを提示していただきたいところですが・・・。
Hisato

2019/01/24 05:10

申し訳ありません。提示しました! よろしくお願いいたします!
guest

回答1

0

ベストアンサー

CSS

1.fa-facebook:hover, 2.fa-twitter:hover, 3.fa-google-plus-g:hover, 4.fa-instagram:hover, 5.fa-youtube:hover, { 6 color: #d5d5d5; 7}

fa-youtube:hover の後ろになぞの カンマがありますが
これを除いても動きませんか?

イメージ説明

提示コードをそのまま使用しているなら、 なぞのカンマを取り除けば
指定色に色が変化することを確認できました。

投稿2019/01/24 05:54

編集2019/01/24 05:58
azuapricot

総合スコア2341

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

azuapricot

2019/01/24 05:57

動きませんか?といいますか、codepenで試してみたところこの謎のカンマを除くと指定色に色が変化しました。
m.ts10806

2019/01/24 06:24

CSSの構文ミスですね。
azuapricot

2019/01/24 07:41

ですね、わりとこういうのって自分では気が付きにくいので第三者の視点って大事ですよね~(コードレビューの大切さ)
m.ts10806

2019/01/24 07:43

エディタも大事ですね。構文ミスは色がかわるようになってるのもありますし。cssはエラーメッセージ出してくれないから厄介ですよね
Hisato

2019/01/25 04:00

無事解決しました!お二人ともありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.37%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問