マウスオーバー

a-blog cmsでは、マウスオーバーしている要素に任意のクラスを付与する（hover）機能の設定が標準で実装されています。（Ver. 1.3.0より）

例）

<div class="js-hover">
	<p>あああ</p>
	<p>いいいい</p>
	<p>うううう</p>
</div>

div要素が表示されている部分にマウスオーバーすると、その要素自身に追加でクラスが付与されます。

マウスオーバーした時の出力ソースコード

<div class="js-hover hover">
	<p>あああ</p>
	<p>いいいい</p>
	<p>うううう</p>
</div>

デモ

スタンダードライセンス

自分でらくらく更新できるWebシステムのa-blog cms スタンダードライセンス。一般的なサイトに必要な機能が揃っている基本的なサイトを制作するためのライセンスです。

プロフェッショナル/エンタープライズライセンス

自分でらくらく更新できるWebシステムのa-blog cms プロ/エンタープライズライセンス。ユーザーの権限設定や承認機能が使用可能な大規模サイト向けのライセンス

特別ライセンス

自分でらくらく更新できるWebシステムのa-blog cms 特別ライセンス。a-blog cmsでは、特定の業種や開発のための特別なライセンスをご用意しています。
開発やテスト的な運用など、ライセンス費用の必要がない環境で自由にご利用いただけますので、是非ご利用ください。

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて：設定を編集する」を参照してください。

//-------
// hover
hoverMark   : '.js-hover',
hoverClass  : 'hover',

hoverMark	ここで指定したセレクタにhoverClassで指定したクラスが付与されます。
hoverClass	マウスオーバーした時に付与されるクラス名の指定です。

config.jsのデフォルトの設定からカスタマイズする場合、JSファイルに下記のように記述します。

ACMS.Ready(function(){
  ACMS.Config.hoverMark = '.js-sample-hover';
  ACMS.Config.hoverClass = 'is-hover';
});

指定したクラスをHTMLに記述します。

例）hoverMarkで「.js-hover」、hoverClassで「hover」と指定した場合

<div class="js-hover">
  <p>あああ</p>
  <p>いいいい</p>
  <p>うううう</p>
</div>

必要に応じてスタイルを指定します。

例）

.hover {
  background-color: #CCCCCC;
}