プログラミングを勉強中のみなさん、こんにちは!
今回は、「ボタンのhoverアニメーションが効かない!」を解決します。
送信ボタンをつくるとき、多くのみなさんがCSSでhoverを設定すると思います。
今やたくさんのサイトで、おしゃれなhoverアニメーションが紹介されています。
気に入ったhoverアニメーションが見つかり、さっそく実装!
CSSでhoverを設定し、いざ確認!
すると・・・・
「ん、効かないな・・・」
と困ったことはありませんか?
その原因は、コピペミス、もしくは、hoverアニメーションに記載されている擬似要素です。
だいたいこの二つですかね。
さっそく詳しく解説していきます。
急いでいる方は、目次でサクッと飛んじゃってくだささいね。
原因
1 コードの貼付けミス
コピーする際に、選択範囲にミスが無かったか、再度確認しましょう。
コピーするときは、
カーソルをドラッグして、いっきに選択しますよね。
そのとき、CSSの書き始めのid「#」や、class「.」、
書き終わりの「}」が選択範囲から漏れていることがけっこうあります。

カーソルをガーーーってドラッグ&選択して、
よく見ずにコピーしてしまったことが何度もありました。
2 class名やid名が違う
自分の書いたHTMLのclass名やid名と、
紹介されているCSSのclass名やid名と一致してますか?
例えば、
自分のHTMLのclass名は「button」なのに、
紹介されているCSSのclass名は「btn」になってたりしませんか?
CSSコードを貼り付けた後で、CSSのclass名やid名を変えることはけっこうあると思います。
こちらも確認しましょう。
3 CSSの擬似要素は要注意
何が要注意かというと・・・
擬似要素です。
紹介されているCSSのコードに擬似要素がある場合、注意してください。
メモ
擬似要素とは、::after とか 、::before などです。
では何を注意するかというと、
自分の書いたHTML、つまりhoverを効かせたい要素(タグ)に
「閉じタグ」があるかどうか
です。
ポイント
擬似要素は「閉じタグ」があるコードでないと、適用できません。
これで解決!
ですので、自分が書いたHTMLの送信ボタンコードが、
<input>
になっていないか確認しましょう。
もし<input>
になっている場合は、<button></button>
に変更しましょう。
どうしても<input>
を使う場合は、<input>
自体を<div>
で囲みましょう
まとめ
いかがでしたでしょうか。
hoverが効かないな・・・と困ったら確認することは3つです。
- コピペミスやid名・class名の確認をしよう
- hoverアニメーションのCSSに擬似要素がある場合、
送信ボタンは<button></button>
を使おう - どうしても
<input>
を使う場合は、<input>
自体を<div>
で囲みましょう
これ以外の場合でも、だいたいは、
「なーーんだ、これか」
っていう小さいミスがほとんどだと思いますので、よーーく確認しましょう。
詳細はこちらもどうぞ!
input と button
同じようなhover関連の記事も紹介しておきます。 続きを見る
【CSS】画像に :hover しても、アニメーションが効かない。を解決!