Top > 開発ガイド > コンポーネント開発逆引きリファレンス > マウスオーバ時にスタイルを切り替える

マウスオーバ時にスタイルを切り替える

対象バージョン

当ドキュメントはRubricks-0.6.x向けです。

概要

ボタンやアイコンをマウスオーバーしたタイミングでスタイルを切り替えます。

イメージ

使い方

1. スタイルシート形式で切り替えたいスタイルを準備します。
   その際、クラス名はそれぞれ「xxx_inactive」・「xxx_active」にして下さい。

   <style type="text/css">
     sample_swap_active {
       color:red;
       font-weight:bold;
     }
     sample_swap_inactive {
       color:black;
     }
   </style>
   

2. 切り替え対象のエレメントを記述します。方法は以下の2通りあります。

　　方法１
　　切替対象のエレメントに対して、先程の「xxx_inactive」及び「swap」というクラスを付加します。
　　そして、rollover_swapメソッドの引数に切替対象エレメントのIDを指定します。

<div id="sample_swap_1" class="sample_swap_inactive swap">Sample1</div>
<div id="sample_swap_2" class="sample_swap_inactive swap">Sample2</div>
<%= rollover_swap('sample_swap_1', 'sample_swap_2') %>

　　方法２
　　切替対象のエレメントに対して、先程の「xxx_inactive」及び「swap」というクラスを付加します。
　　そして、rollover_swap_rangeメソッドの引数に切替対象エレメントを含むエレメントのIDを指定します。
　　上述のIDを直接指定する場合に比べてJavaScriptの実行時間が掛かります。

<div id="sample_swap">
  <div class="sample_swap_inactive swap">Sample1</div>
  <div class="sample_swap_inactive swap">Sample2</div>
</div>
<%= rollover_swap_range('sample_swap') %>

API

rollover_swap(*dom_ids)

• マウスオーバーしたタイミングでスタイルを切り替えるヘルパです。

引数	必須	初期値	型	説明
*dom_ids	○	-	String	切替対象エレメントのDOM-ID。複数指定可能です。