ホバー時のスタイルが反映されない

ホバー時のスタイルが反映されない – ZenBlocks buttonBasic

結論

ホバーが反映されない原因は、**Hoverタブ未設定・トランジションDuration 0・CSSキャッシュ残存**のいずれかです。以下の手順で順番に確認すれば解決できます。

—

原因

  • **Hoverタブに値が入っていない**: スタイル設定パネルにはDefault/Hoverの2タブがあり、Hoverタブ側に値を入れないとホバー時の変化は発生しません。
  • **トランジションのDurationが 0 になっている**: スタイル設定 > トランジション > Duration が `0ms` だと、変化が瞬間的すぎて視認できないか、ブラウザによっては適用されません。
  • **CSSキャッシュが古いまま**: ZenBlocksはフロントエンド用CSSをキャッシュします。設定変更後にキャッシュが残っていると、変更前のスタイルが適用され続けます。

解決手順

  1. 対象のbuttonBasicブロックを選択
  2. サイドバーの「スタイル設定」パネルを開く
  3. **Hover** タブに切り替える
  4. 背景色・文字色・ボーダーなど、変化させたいプロパティに値が入っているか確認
  5. 値が空の場合は設定を入力する
  6. スタイル設定パネル内の「トランジション」セクションを開く
  7. **Duration** が `0ms` でないことを確認（推奨: 200〜400ms）
  8. **Easing** が設定されているか確認（`ease` または `ease-out` 推奨）
  9. 必要に応じて Reset ボタンで初期値に戻す
  10. フロントエンドでホバーを確認
  11. 反映されない場合、ブラウザキャッシュをクリア（Ctrl+Shift+R / Cmd+Shift+R）
  12. それでも反映されない場合、ZenBlocksのCSSキャッシュディレクトリ `/wp-content/uploads/zenblocks/` 内のファイルを確認
  13. テキストアニメーション・アイコンアニメーションが有効な場合、トランジション設定と競合することがあります
  14. アニメーション有効時、スタイル設定のトランジションパネルに注意表示が出ていないか確認
  15. 両方のDuration/Delayが合算されて体感的な遅延が発生していないか確認

注意点

**エディタ上ではホバーを確認できません**。必ずフロントエンドのプレビューで確認してください。

テキストアニメーションとスタイルのトランジションを併用する場合、両方の Duration / Delay が合算されて体感的な遅延になることがあります。

アイコンアニメーションが有効な場合、アイコンの opacity / visibility はアニメーション側のCSSが優先されます。

関連設定

関連FAQ