スマホ表示の不具合改善についてのご相談

Question

以下ページのランキング部分について修正のご相談です。
https://aoyama-garden.com/lp/feature-greenhouse.html

パソコン画面では問題ありませんが、スマートフォン画面でランキングを指でスライドする際、左上に表示される順位の画像が商品画像の後ろに隠れてしまいます。この問題の改善方法について教えていただけますでしょうか。

なお、このページは以下のサイトからソースをコピーして作成しました。動きとしては、こちらのサイトのような挙動を目指しています。
https://living-garden-store.jp/pages/feature-greenhouse

具体的なソースの修正箇所を教えていただけますと大変助かります。よろしくお願いいたします。

Answer

ECマスターズの伊藤です。

> パソコン画面では問題ありませんが、スマートフォン画面でランキングを指でスライドする際、左上に表示される順位の画像が商品画像の後ろに隠れてしまいます。この問題の改善方法について教えていただけますでしょうか。

確認しましたところ、
対象のページのHTMLに

a:hover {
	opacity: .8;
	color: #93b143;
}

が記載されており、
この
	opacity: .8;
が影響しているようでした。

こちらを削除いただくと、
正常に動作すると思います。

また、a:hover {〜〜} の記載をすると
今回のように、すべてのaタグに
影響してしまいますので、

上記のCSSを適用したい要素にのみ
classを付与するなどして
対応をお願いいたします。