未来エンジニア養成所Blog

月単価180万以上のプログラミング講師がプログラミングを皆に楽しんでもらうための情報をお届けします。

【Bubble/ノーコード】マウスホバーでテキストの色を変える

title


今回は「Conditional」を使って、ユーザーがマウスホバーした時に、テキストの色を変える方法を解説します。



「Conditional」の使い方

「Text」エレメントを使います。

Textエレメント



テキスト名を「Hover me!」としておきます。

テキスト名



また、フォントサイズも少し大きくしておきます。

フォントサイズ



「Conditional」タブを選択します。

Conditionalタブ



「Define another condition」をクリックして、条件を定義します。

Define another condition



いつ条件を変更するかを指定するので、まず「This Text」を選択します。

This Text



次に「is hovered」を選択し、「このテキストがホバーされたとき」と条件を設定します。

is hovered



続いて、どんな条件に変更するかを設定します。


「Select a property to change when true」で変更する内容を選択します。

Select a property to change when true



今回は、テキストのフォントの色を変更しますので、「Font color」を選択します。

Font color



Font colorを「赤色」に設定して完了です。

Font color



これで、「テキストがマウスホバーされたら、テキストの色を赤色にしてください」という条件が追加できました。


プレビューで確認して、赤色に変われば完成です。

finish



参考図書



LINE公式アカウント

仕事が辛くてたまらない人生が、仕事が楽しくてたまらない人生に変わります。
【登録いただいた人全員に、無料キャリア相談プレゼント中!】


LineOfficial

友だち追加