メインコンテンツにスキップ
すべてのコレクションよくある質問エディタ(デザイン)
ボタンにカーソルを乗せると色が変わるアニメーションの作成方法
ボタンにカーソルを乗せると色が変わるアニメーションの作成方法

条件付きスタイルのホバーと(in)ホバーを使います

Saika avatar
対応者:Saika
1か月以上前に更新

Studioのアニメーション

Studioでは、「条件付きスタイル」を使って、特定の条件下でデザインの見た目や形を変えることができます。この機能を利用して、通常時と条件付きスタイル時の変化を設定し、アニメーションを作り出します。

カーソルを乗せた時のスタイルの変化は、条件付きスタイルのホバー(in)ホバーで設定します。

それぞれについて詳しくは、次の記事をご覧ください。

作成手順

1. 条件付きスタイル「ホバー」を設定

アニメーションを設定したいボックスをクリックし、エディタ右上の「条件付きスタイル」から「ホバー」を選択します。

ホバーが選択された状態で、ボックスの塗りを変更します。

2. 条件付きスタイル「in ホバー」を設定

テキストボックスを選択し、エディタ右上の「条件付きスタイル」から(in)ホバーを選択します。

※(in)ホバーは、ホバーを設定した要素の中にある要素に、さらに別のスタイルを付け加える時に使います

テキストの色を白色へ変更します。

3. ライブプレビューで確認する

エディタの右上にある「プレビュー」ボタンをクリックして、ライブプレビューを見ながら、設定を微調整などして完成です。

こちらの回答で解決しましたか?