Bricksでマウスオーバーの設定

Bricksでマウスオーバーの設定方法

目次(MENU)

Bricks で制作されたサイトを見ていると、マウスオーバー(ホバー)設定がされていない ケースが時々あります。
「設定方法が分からないのでは?」と思うこともあり、今回は Bricks でのホバー設定の方法 を分かりやすく解説します。

ホバーの設定

ボタンにカーソルを乗せたとき、色やデザインが変わる動作を ホバー(hover) といいます。
CSS では :hover を使いますが、Bricks では管理画面から簡単に設定できます。
対象ウィジェットを選択して、下図のようにプルダウンから

  • :hover
  • :action
  • :focus

などの状態を選んでデザインを設定できます。

Bricksのホバー

Bricksのホバー設定方法

  1. ウィジェットを選択
  2. プルダウンから :hover を選択
  3. 「ホバー時に変更したいデザイン」だけを設定

設定が終わったら 通常状態に戻すために「:hover」を外すのを忘れない
通常デザインとホバーデザインを混同しがちなので、最後に「:hover」を外すのが重要です。

ポインターの設定

ホバー対象のボタンは、通常 指先(pointer)アイコン になります。
しかし、まれに指マークにならない場合があります。
そのときは、下図のように カーソル:auto → pointer へ変更してください。
これで、ホバーしたときに適切なカーソル表示になります。

カーソルをポインターに変更する設定箇所
参考になった・役に立った:
お問い合わせはこちら

コメントして足跡を残す…

おススメの関連する記事:

ログインID/メールアドレス *
パスワード *
IDPWを保存する
ログインID/メールアドレス