Hover werkt niet
Controlepunten
1. Controleer of hover-waarden zijn ingesteld.
2. Controleer of `Duur` niet op `0ms` staat.
3. Controleer of `Easing` correct is ingesteld.
4. Wis CSS-cache en controleer frontend.
Veelvoorkomende oorzaken
– Alleen normale tab is ingevuld.
– Overgang is te kort of uitgeschakeld.
– Verouderde cache.
解決手順
### ステップ1: Hoverタブの値を確認する
1. 対象のbuttonBasicブロックを選択
2. サイドバーの「スタイル設定」パネルを開く
3. **Hover** タブに切り替える
4. 背景色・文字色・ボーダーなど、変化させたいプロパティに値が入っているか確認
5. 値が空の場合は設定を入力する### ステップ2: トランジション設定を確認する
1. スタイル設定パネル内の「トランジション」セクションを開く
2. **Duration** が `0ms` でないことを確認（推奨: 200〜400ms）
3. **Easing** が設定されているか確認（`ease` または `ease-out` 推奨）
4. 必要に応じて Reset ボタンで初期値に戻す### ステップ3: CSSキャッシュをクリアする
1. フロントエンドでホバーを確認
2. 反映されない場合、ブラウザキャッシュをクリア（Ctrl+Shift+R / Cmd+Shift+R）
3. それでも反映されない場合、ZenBlocksのCSSキャッシュディレクトリ `/wp-content/uploads/zenblocks/` 内のファイルを確認### ステップ4: アニメーション設定との競合を確認する
1. テキストアニメーション・アイコンアニメーションが有効な場合、トランジション設定と競合することがあります
2. アニメーション有効時、スタイル設定のトランジションパネルに注意表示が出ていないか確認
3. 両方のDuration/Delayが合算されて体感的な遅延が発生していないか確認—
注意点
– **エディタ上ではホバーを確認できません**。必ずフロントエンドのプレビューで確認してください。
– テキストアニメーションとスタイルのトランジションを併用する場合、両方の Duration / Delay が合算されて体感的な遅延になることがあります。
– アイコンアニメーションが有効な場合、アイコンの opacity / visibility はアニメーション側のCSSが優先されます。—
関連設定
– [スタイル設定](../style/) – Default/Hoverタブ、トランジション
– [テキストアニメーション設定](../text-animation/) – ホバー時テキスト演出
– [アイコンアニメーション設定](../icon-animation/) – ホバー時アイコン演出
– [ボタンアニメーション設定](../button-animation/) – ホバー時ボタン全体の演出