【jQuaryを使わない】CSSのみでホバーすると別の画像に切り替える方法。

こんにちは、Naokiです。

今回、画像をホバーすると、別の画像を切り替わるデザインを実装したのでシェアいたします。

cssのみで簡単に実装します!

それではいってみましょう!

画像をホバーしてみてください。

画像が切り替わりましたか?

片方のdisplayプロパティをblockにして、もう片方のdisplayプロパティをのnoneにして非表示にします。そこでホバーした時にのみ、画像が切り替わるように:hover擬似クラスを使って、blockだったのをnoneに、noneだったのをblockに切り替えるだけです。

説明下手ですいません。

コードを説明するのって難しいですね。。。

今回は短いですが以上です。

コピペOKなので是非とも有効活用してください!

それでは今日はこの辺で。

 

人気記事プログラミングはやるべき!何から始める?おすすめ学習サイト