【Divi】マウスホバーでコンテンツをスワップさせる方法
こんにちはナオミです。
『マウスが画像の上に来た時、違う画像を表示させたい。』
『マウスがテキストの上に来た時違うテキストを表示させたい。』
こういう風に思ったことはありませんか？
Diviの最近のアップデートで、ホバーで画像や文字を他のものにスワップすることが簡単に出来るようになりました。
それではどうやるのか説明していきます。
Diviのバージョンが3.27以上であることを確認してください。
Diviで画像をスワップする方法
まずは画像を挿入します。
ホバーアイコンをクリック
画像の上にマウスを持っていくと、矢印のアイコンが出てきますのでこれをクリックします。
すると、『デスクトップ』と『ホバー』というテキストの入ったボックスが出てきます。
そうしたらホバーをクリックします。
ホバーの状態でも画像を設定
このようにホバーを選択すると、画像をまた設定できるようになります。
先ほどと違う画像を設定してみましょう。
このように画像が表示されます。
それでは、デスクトップの方を選択してみます。
前の画像が表示されれば成功です。
保存して、ビジュアルビルダーを閉じます。
これで成功です。とっても簡単だったのではないでしょうか。
テキストでもホバーの設定可能
このように、画像だけではなくテキストでもホバーの設定が可能です。
とってもシンプルですよね。
是非試してみてください。
Diviのことをもっと深く知りたい方は、Diviの使い方完全ガイドをご覧ください。
Diviでマウスホバーで画像をスワップする方法を動画でご覧になりたい方はこちらからどうぞ！
コードを書かないウェブ制作を目指すコミュニティ『TOFUラボ』
Diviの最新情報を知りたいなら、ノーコードでWEBサイト制作を支援するサロン『TOFUラボ』に参加しませんか？
私が運営してるノーコードでWEBサイト制作を支援するのコミュニティです。
最新情報だけではなく技術的な質問も飛び交っています。
また、デザインやSEOなどWEBサイト制作に関する様々な勉強会も開催されています。
『TOFUラボ』の紹介はこちらです
興味があれば、是非参加してくださいね。
入会してから７日間は無料で合わないなと思えばいつでもキャンセル可能です。
