『マウスが画像の上に来た時、違う画像を表示させたい。』
『マウスがテキストの上に来た時違うテキストを表示させたい。』
こういう風に思ったことはありませんか？
Diviの最近のアップデートで、簡単にホバーで画像や文字を他のものにスワップすることが出来るようになりました。
それではどうやるのか説明していきます。
Diviのバージョンが3.27以上であることを確認してください。
Diviで画像をスワップする方法
まずは画像を挿入します。
ホバーアイコンをクリック
画像の上にマウスを持っていくと、矢印のアイコンが出てきますのでこれをクリックします。
すると、『デスクトップ』と『ホバー』というテキストの入ったボックスが出てきます。
そうしたらホバーをクリックします。
ホバーの状態でも画像を設定
このようにホバーを選択すると、画像をまた設定できるようになります。
先ほどと違う画像を設定してみましょう。
このように画像が表示されます。
それでは、デスクトップの方を選択してみます。
前の画像が表示されれば成功です。
保存して、ビジュアルビルダーを閉じます。
これで成功です。とっても簡単だったのではないでしょうか。
テキストでもホバーの設定可能
このように、画像だけではなくテキストでもホバーの設定が可能です。
とってもシンプルですよね。
是非試してみてください。
Diviのことをもっと深く知りたい方は、Diviの使い方完全ガイドをご覧ください。