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の擬似要素は要注意

これはボタン要素のhoverに多いです。

では、何に要注意かといいうと、紹介されているhoverのCSSコードに擬似要素が含まれいるかどうかです。

オシャレなアニメーションはこの擬似要素が含まれていることが多いです。

アニメーションのコードに擬似要素が含れいると何がダメなのか・・・

<input>は閉じタグが無いので、擬似要素が含まれているhoverアニメーションは効きません。

ボタンのタグが、<input>になっている場合は<button></button>に変更しましょう。

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

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

まとめ

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

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

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

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

よく使うhovevrテクニックも参考にどうぞ。