プログラミング

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

スポンサーリンク

pointer

プログラミングを勉強中のみなさん、こんにちは!
今回は、「ボタンの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名を変えることはけっこうあると思います。
こちらも確認しましょう。

code

3 CSSの擬似要素は要注意

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

擬似要素です。

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

 

メモ

擬似要素とは、::after とか 、::before などです。

 

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

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

 

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

 

です。

 

ポイント

擬似要素は「閉じタグ」があるコードでないと、適用できません。

 

これで解決!

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

 

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

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



まとめ

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

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

 

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

 

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

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

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

スポンサーリンク

-プログラミング
-, , , , , , , , , , , , ,

© 2022 サカらいふ Powered by AFFINGER5