プログラミング

【CSS】画像に :hover しても、アニメーションが効かない。を解決!

スポンサーリンク

アニメーション

今回は、hoverしてもアニメーションが効かない、という現象を解決します。

私が実際に経験した現象です。

cssで、画像にhoverを設定。
hoverすると画像が少し暗くなるように設定しました。

しかし、いざhoverしてもうんともすんともなりません。

実際のコード

HTML
code9.10

[css]
a{
transition-duration: 0.3s;
}

a:hover{
transition-duration: 0.3s;
opacity: 0.6;
}

やりたいこと

この画像にhoverすると、画像が少し暗くなるはずなんです。

しかし、このコードではできません。

なんでかわかりますか?

結果

【div】が余計なんです。いらないんです。

hover対象、つまり今回の例で言うと【a】タグです。
その【a】タグと、アニメーションの対象となる【img】、

この間にタグ(今回の場合はdiv)があると、【img】まで届かないんですね。

結果、divを削除したら、ちゃんと画像にアニメーションが反映されました。

ちなみに、邪魔した【div】を【section】や【h1】に変えたりもしまたが、ダメでした。

まとめ

と言うことで、みなさんも、画像(img)にhoverしても何も起こらない、と困ってしまったら、

hover対象のタグと、アニメーション対象である画像(img)に間に、何かタグが挟まれていないかチェックしてみてくださいね。

 

☆画像のアニメーションはこちらでいろいろと紹介されております↓☆
https://cotodama.co/css_mouseover_img/

スポンサーリンク

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

© 2022 サカらいふ Powered by AFFINGER5