すべてのコレクション
よくある質問
エディタ(デザイン)
リンクやホバーアニメーションが動作しない原因と対処法
リンクやホバーアニメーションが動作しない原因と対処法

要素の重なりによるリンク、ホバーアニメーションの問題

Saika avatar
対応者:Saika
一週間前以上前にアップデートされました

リンクやホバーアニメーションの設定が、ライブプレビューや公開サイト上で動作しない場合、別の要素が覆いかぶさって配置されていることが原因であることが多いです。ここでは、主に2つの状況とその対処方法について解説します。

全体を覆うアニメーションボックスによる問題

条件付きスタイル「出現時」を設定して、サイトアクセス時にのみ表示させるような要素を設置している場合は、その要素の重ね順を確認してください。他の要素よりも重ね順の数字が大きく、前面に表示されている場合は、数字を小さく調整してください。

例えば、以下の画像では、ローディング風アニメーション用のボックスを選択しています。重ね順は通常時(アニメーション終了時)に「-3」と設定されています。

この重ね順が、ページ内の他の要素よりも大きくなると、前面に表示され他の要素の覆い被さるようになります。

部分的に重なるボックスによる問題

リンクやホバーアニメーションが機能しない問題のあるボックスに、別のボックスが重なっているかどうかをエディター上で確認してください。必要に応じて、配置を見直したり、重ね順を調整したりしてください。

例えば以下の画像では、マイナスマージンを設定したボックスに別のボックスが重なっています。このような状況でも、重ね順の調整や配置の見直しを行えば、問題は解決します。

これらの対処法を用いても問題が解決しない場合は、STUDIOコミュニティへ質問の投稿をしていただくか、STUDIOカスタマーサポートをご利用ください。

こちらの回答で解決しましたか?