ホバーした時にCSSだけで出来る様々な画像切り替え方法

こんにちは。 2種類のサイズのボタンに同じエフェクトを追加しようと思い、クラス名をとに、 CSSを btn2 position: relative; width: 300px; height: 60px; margin: 0 auto; display: block; border-radius: 0px; overflow: hidden; cursor: pointer; > .btn2 img position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; display: block; -webkit-transition: .4s ease-in-out; transition: .4s ease-in-out; > .btn2:hover img:nth-of-type(2) opacity: 0; > にしましたが、btn2がうまく動作しません。どこが間違っているか教えていただけませんか

コメントありがとうございます！添付頂いたCSSを実際に表示してみましたが、最初のbtn2を指定する際に「.」が抜けていて上手く表示できないようでした！それ以外は問題ありませんでした☆彡サイト制作がんばってください！！応援しています！また何かわからない所が有れば、ブログ記事に関係なくお問い合わせフォームから聞いてくださいね！

上田ヒロユキより: 修正したら治りました。大変助かりました。動いて良かったです！ページ制作がんばってくださいね！！スマホでホバーしてしまうのを避けたいのですが、どのような記述にしたらよいでしょうか？メディアクエリを設定してもホバーしてしまいます…＞＜

コメントしていただきありがとうございます！スマホでホバーを避ける場合、メディアクエリで「:hover」を上書きすればできます！または、PCの時だけに「:hover」アクションを追加すれば、スマホでは動かなくなります！最初の「フェードで切り替わるボタン」を例としてあげてみます。 ————————————————————— 【①メディアクエリでスマホのみホバーアクションを停止する】 @media (max-width: 768px) .btn:hover img:nth-of-type(2) // スマホでホバーした際に、値を動かさない様上書き指定する opacity: 1; > > —————————————————————- 【②メディアクエリでPCのみにホバーアクションを追加する】「フェードで切り替わるボタン」のCSSの↓は消して、「@media 」で囲われた箇所をコピペしてください。 .btn:hover img:nth-of-type(2) opacity: 0; > @media (min-width: 1024px) .btn:hover img:nth-of-type(2) // PCでホバーした時のみ、ホバーアクションを指定する opacity: 0; > > —————————————————————- どちらでもスマホでホバーしない様できます。参考になれば幸いです！！ブログに乗っている所で、分からない部分がありましたら、またコメントくださいね！

複数横に並べるときはどうやって記述しますか？

コメントありがとうございます！複数のボタンをを横並びにする時は、CSSで「.btn」に「display: inline-block;」を追加すると横並びになります。追記してコピペできるようしていますので、参考にしていただけると嬉しいです！

📎📎📎📎📎📎📎📎📎📎