Bricks で制作されたサイトを見ていると、マウスオーバー(ホバー)設定がされていない ケースが時々あります。
「設定方法が分からないのでは?」と思うこともあり、今回は Bricks でのホバー設定の方法 を分かりやすく解説します。
ホバーの設定
ボタンにカーソルを乗せたとき、色やデザインが変わる動作を ホバー(hover) といいます。
CSS では :hover を使いますが、Bricks では管理画面から簡単に設定できます。
対象ウィジェットを選択して、下図のようにプルダウンから
- :hover
- :action
- :focus
などの状態を選んでデザインを設定できます。

Bricksのホバー設定方法
- ウィジェットを選択
- プルダウンから :hover を選択
- 「ホバー時に変更したいデザイン」だけを設定
設定が終わったら 通常状態に戻すために「:hover」を外すのを忘れない
通常デザインとホバーデザインを混同しがちなので、最後に「:hover」を外すのが重要です。
ポインターの設定
ホバー対象のボタンは、通常 指先(pointer)アイコン になります。
しかし、まれに指マークにならない場合があります。
そのときは、下図のように カーソル:auto → pointer へ変更してください。
これで、ホバーしたときに適切なカーソル表示になります。





