マウスオーバーしている要素にクラスを付与する（hover）

a-blog cmsでは、マウスオーバーしている要素に任意のクラスを付与する（hover）機能の設定が標準で実装されています。（v1.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>

---

マウスオーバーしている要素にクラスを付与する（hover）

1. 設定の編集

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

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

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

2. HTMLとCSSの編集

HTML

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

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

---

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

CSS

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

例）

.hover {
  background-color: #CCCCCC;
}

---