【CSS】ボタンのhoverアニメーションが効かない！を解決します　　

プログラミングを勉強中のみなさん、こんにちは！
今回は、「ボタンのhoverアニメーションが効かない！」を解決します。

送信ボタンをつくるとき、多くのみなさんがCSSでhoverを設定すると思います。
今やたくさんのサイトで、おしゃれなhoverアニメーションが紹介されています。

気に入ったhoverアニメーションが見つかり、さっそく実装！
CSSでhoverを設定し、いざ確認！

すると・・・・
「ん、効かないな・・・」

と困ったことはありませんか？

その原因は、コピペミス、もしくは、hoverアニメーションに記載されている擬似要素です。
だいたいこの二つですかね。

さっそく詳しく解説していきます。
急いでいる方は、目次でサクッと飛んじゃってくだささいね。

原因

１　コードの貼付けミス

コピーする際に、選択範囲にミスが無かったか、再度確認しましょう。

コピーするときは、
カーソルをドラッグして、いっきに選択しますよね。

そのとき、CSSの書き始めのid「#」や、class「.」、
書き終わりの「}」が選択範囲から漏れていることがけっこうあります。

ライド

私もよくやりましたね。
カーソルをガーーーってドラッグ＆選択して、
よく見ずにコピーしてしまったことが何度もありました。

２　class名やid名が違う

自分の書いたHTMLのclass名やid名と、
紹介されているCSSのclass名やid名と一致してますか？

例えば、
自分のHTMLのclass名は「button」なのに、
紹介されているCSSのclass名は「btn」になってたりしませんか？

CSSコードを貼り付けた後で、CSSのclass名やid名を変えることはけっこうあると思います。
こちらも確認しましょう。

３　CSSの擬似要素は要注意

何が要注意かというと・・・

擬似要素です。

紹介されているCSSのコードに擬似要素がある場合、注意してください。

では何を注意するかというと、

自分の書いたHTML、つまりhoverを効かせたい要素（タグ）に

「閉じタグ」があるかどうか

です。

これで解決！

ですので、自分が書いたHTMLの送信ボタンコードが、
<input>になっていないか確認しましょう。

もし<input>になっている場合は、<button></button>に変更しましょう。

どうしても<input>を使う場合は、<input>自体を<div>で囲みましょう

まとめ

いかがでしたでしょうか。

hoverが効かないな・・・と困ったら確認することは３つです。

1. コピペミスやid名・class名の確認をしよう
2. hoverアニメーションのCSSに擬似要素がある場合、
   送信ボタンは<button></button>を使おう
3. どうしても<input>を使う場合は、<input>自体を<div>で囲みましょう

これ以外の場合でも、だいたいは、
「なーーんだ、これか」
っていう小さいミスがほとんどだと思いますので、よーーく確認しましょう。

詳細はこちらもどうぞ！
input と button

同じようなhover関連の記事も紹介しておきます。