Top > 開発ガイド > コンポーネント開発Tips集 > マウスオーバによるスタイルの切替

マウスオーバによるスタイルの切替

対象バージョン

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

スタイルの準備

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

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

切替対象のエレメントの記述方法１

切替対象のエレメントに対して、先程の「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') %>