閲覧者がカーソルを載せた時、そのボックスが画面に出現した時など、特定の条件でボックスのスタイルを変化させられます。条件付きスタイルは、大きく次の「グループ」に分かれています。

ボックスを選択し、エディタの右上部にある「条件付きスタイル」の項目をクリックすると、その条件が満たされた状態でのスタイル編集モードになります。

この編集モードは、別のボックスを選択するか、もしくは同じ条件を再度クリックすると解除することができます。

条件付きスタイルを設定しているとき、設定欄の右上にある「×」アイコンをクリックすると、その設定を解除できます。

また、項目の右にある「×」アイコンをクリックすると、その条件付きスタイルを一括でリセットできます。

閲覧者がカーソルを載せたときのスタイルを変化させます。一般的には、どの要素がクリックできるのかを閲覧者に伝えるために用います。

「（in）ホバー」は、ホバーを設定した要素の中にある別の要素に追加のスタイルを適用するときに使います。例えば、「ボタン内の矢印の色だけを変える」などの表現が可能です。

親となるボックスで何らかの「ホバー」スタイルを設定していないと、「（in）ホバー」の設定はできないのでご注意ください。

要素に「ホバー（:hover）」のスタイルを適用する際には、特にモバイル端末の挙動に注意が必要です。ブラウザによって、ホバーが設定された要素のタップに対する反応が異なるためです。詳細はこちら。

特にiOSデバイスでは、モバイル閲覧時のタップ操作では基本的に反応せず、リンク設定がある場合や長押し時に動作することがあります。この事を踏まえ、タップ操作が発生する場合には、デザインを変えるなどホバーの設定は削除しその他の方法で対応することをご検討下さい。

設置したフォームの入力欄や選択肢のスタイルを、ユーザーが入力または選択している間だけ変化させます。

設置したフォーム送信ボタンのスタイルを、閲覧者がクリックしている間だけ変化させます。

画面の読み込みやスクロールによってブラウザ画面内に登場する直前のスタイルを設定できます。

例えば、条件「出現時」の編集モードで不透明度を０（透明）にし、条件解除時点では１（不透明）にしておけば、ふわっと登場するかのようなアニメーションを表現できます。

※レイヤーパネルで一番上位のボックス（レイヤー）には設定できません

条件付きスタイル「クローズ」は、要素をクリックした際やカーソルを乗せた際に、開閉する専用のボックスである「Toggleボックス」にのみ設定できます。

Toggleボックスは、ボタンとコンテンツの2つのパーツで構成され、閲覧者がボタンパーツをクリックするかカーソルを載せると、コンテンツパーツが開閉します。

このコンテンツパーツが閉じている状態のスタイルを「クローズ」で設定します。

ページ（サイト内）リンクを設定したボックスで利用できます。

ページリンク先と閲覧中のページが同じときだけ、スタイルを変更します。これにより、閲覧者に「現在、そのリンク先のページを閲覧しています」と視覚的に示すことができます。

※リンク先がモーダルページまたはリダイレクトページの場合、この設定は行えません

「下層ページも含む」をONにすると、そのページリンク先の下層ページを閲覧している時にもスタイルを変更します。例えば、ページリンク /company を設定したボックスでONにすると、 /company/about を閲覧している時にもそのスタイルが適用されます。

※「ホーム」ページには「下層ページも含む」設定が適用できません

CMSリストや、手動でリスト化したボックスで利用できます。

リストの先頭のアイテムだけスタイルを変更できます。最新のブログ記事を目立たせたい時などに役立ちます。

ブール値プロパティが有効なCMSモデルを紐づけた動的ページ、または動的リストで利用できます。該当のブール値がON（true）になっている状態のスタイルを設定できます。

ブール値プロパティについて、こちらの記事をご覧ください。

プロパティ

インホバー in:hover ホバーアクション アニメーション解除 focus

inhover マウスオン