マウスオーバーについて

Question

いつもお世話になっております。
ecステーションのページクリエイターで、pcヘッダーとレフトnaviを作成していますが、
ecマスターズのデザインレシピからマウスオーバー

a { transition: all 0.3s; }
a:hover { opacity: 0.6; }


こちらをhtml直接入力ブロックで記述しています。
正しく表示されていますが、
マウスオーバーを付ける部分・付けない部分を分けたい場合(画像赤丸の箇所はマウスオーバー有効に)、どのように記述すればいいでしょうか。
よろしくお願いいたします。###HR######IMG0289f71a14cf6a56212feca1d74f96bd7.pngIMG0###

Accepted Answer

ECマスターズの伊藤です。

> ページクリエイターで編集するたびにテキストエディタで開き
> 直接編集する必要がありますか？

１）ページクリエイターで作成 ＞ GOLDにアップ
↓
２）テキストエディタにてCSSを追加 ＞ GOLDにアップ
↓
３）ページクリエイターで編集 ＞ GOLDにアップ

を行ったところ
（２）のCSSは削除されてしまいました。

ページクリエイターに保存された
内容を編集するため、
独自に編集してアップロードされた内容は
無視されるようです。

そのため、ページクリエイターで編集のたび、
修正していただく必要がございます。

Answer

ECマスターズの伊藤です。

> マウスオーバーを付ける部分・付けない部分を分けたい場合(画像赤丸の箇所はマウスオーバー有効に)、どのように記述すればいいでしょうか。

マウスオーバーを適用したい箇所に
classを付与することで
ご希望どおりしていただくことができますが、
ecステーションのページクリエイターでは
ご対応いただけないため、

leftnavi.html

をテキストエディタなどで開いていただき
直接編集して頂く必要がございます。

※テキストエディタをお持ちでない場合
Mery などをご利用くださいませ。
https://forest.watch.impress.co.jp/library/software/mery/

まず、適用させたい箇所の

に

のように、わかりやすいclass名をつけてください。


次に、上記のclassが与えられている箇所にのみ
CSSが適用されるように修正いただきますと
指定箇所にのみ、マウスオーバーが
適用されるようになります。



a { transition: all 0.3s; }
a:hover { opacity: 0.6; }


↓↓↓


a.mouseover { transition: all 0.3s; }
a.mouseover:hover { opacity: 0.6; }

Answer

ご回答ありがとうございます。
ページクリエイターで編集するたびにテキストエディタで開き
直接編集する必要がありますか？