Hover Styles Not Working – ZenBlocks buttonBasic

Hover Styles Not Working – ZenBlocks buttonBasic

Summary

When hover styles are not working, the cause is one of the following: **Hover tab not configured, Transition Duration set to 0, or stale CSS Cache**. Follow the steps below in order to resolve the issue.

—

Cause

  • **No values set in the Hover tab**: The Style Settings panel has Default and Hover tabs. If no values are entered in the Hover tab, no changes will occur on hover.
  • **Transition Duration is set to 0**: If Style Settings > Transition > Duration is `0ms`, the change happens too instantly to be visible, or may not be applied at all depending on the browser.
  • **Stale CSS Cache**: ZenBlocks caches CSS for the frontend. If the cache remains after changing settings, the old styles will continue to be applied.

Solution Steps

  1. Select the target buttonBasic block
  2. Open the **Style Settings** panel in the sidebar
  3. Switch to the **Hover** tab
  4. Verify that the properties you want to change (background color, text color, border, etc.) have values set
  5. If values are empty, enter the desired settings
  6. Open the **Transition** section within the Style Settings panel
  7. Confirm that **Duration** is not `0ms` (recommended: 200-400ms)
  8. Confirm that **Easing** is set (`ease` or `ease-out` recommended)
  9. If needed, use the Reset button to restore defaults
  10. Check hover behavior on the frontend
  11. If not reflected, clear your browser cache (Ctrl+Shift+R / Cmd+Shift+R)
  12. If still not reflected, check the files in ZenBlocks' CSS Cache directory at `/wp-content/uploads/zenblocks/`
  13. If Text Animation or Icon Animation is enabled, they may conflict with Transition settings
  14. Check whether any warning messages appear in the Style Settings Transition panel when animations are active
  15. Verify that the combined Duration/Delay values from both settings are not causing a perceived delay
  16. **Hover cannot be previewed in the editor**. Always check hover behavior on the frontend preview.
  17. When using Text Animation and Style Transition together, both Duration/Delay values are combined, which can result in a perceived delay.
  18. When Icon Animation is enabled, the icon's opacity/visibility is controlled by the animation CSS, which takes priority.

Related Settings

関連設定

– [スタイル設定](../style/) – Default/Hoverタブ、トランジション
– [テキストアニメーション設定](../text-animation/) – ホバー時テキスト演出
– [アイコンアニメーション設定](../icon-animation/) – ホバー時アイコン演出
– [ボタンアニメーション設定](../button-animation/) – ホバー時ボタン全体の演出

Related FAQ