CSS WEB制作

hoverアニメーションが効かない・・・ 見なおすポイントを解説!

pointer

今回は、「hoverアニメーションが効かない!」を解決します。

 

気に入ったhoverアニメーションをさっそく実装!

CSSでhoverを設定し、いざ確認!

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

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

 

エラー原因はいろいろあるんですが、このどれか(↓)にだいたいあてはまるかと思います。

 

ポイント

  1. コードの貼付けミス
  2. class名やid名が違う
  3. hoverのアクション内容に擬似要素が含まれていると要注意

 

さっそく詳しく解説していきます。

急いでいる方は、目次でサクッと飛んじゃってくだささいね。

 

コードの貼付けミス

ネットで紹介されているhoverコードをコピーする際に、選択範囲にミスが無かったか、再度確認しましょう。

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

 

そのとき、CSSの書き始めのid「#」や、class「.」、

書き終わりの「}」が選択範囲から漏れていることがけっこうあります。

 

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

 

 

 

class名やid名が違う

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

 

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

 

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

こちらも確認しましょう。

 

code

 

 

 

CSSの擬似要素は要注意

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

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

 

メモ

擬似要素とは、::after や 、::before のことです。

 

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

 

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

 

ポイント

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

 

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

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

 

 

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

 

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

 

 

まとめ

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

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

 

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

 

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

 

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

pointer
【CSS】よく使うhoverテクニック3選 知っておくと便利です

続きを見る

-CSS, WEB制作
-

© 2024 人生フリーハンド Powered by AFFINGER5