Hover Mode
Hover mode empowers you to edit attributes of Nectar blocks that take effect when the element is hovered over. This mode is unique because there's no cascade effect. The value is either set and active, or it isn't. When set, it will override all other viewports.
Reach for Hover Mode when you want a simple state change on the block itself — an opacity fade, a color or background swap, a border tweak — applied as a straightforward CSS transition. For anything more involved, use an Interaction animation instead: it's JS-powered and gives you full control over from/to values, per-property timing, easing (including spring), and — crucially — the ability to have one block react when a different block is hovered (hover a card to move an arrow inside it). Rule of thumb: simple transition → Hover Mode; complex or cross-block interaction → Interaction.
Unlike Responsive Mode, not every setting can be edited in Hover Mode. As of version 3 the set of state-aware controls is broad — background and text color, border and border radius, spacing, size, position, effects, transform and images. (The same state-aware controls power the Header States used in the Header Builder.) Similar to Responsive Mode, you can identify which settings can be modified in Hover Mode by locating any field with its label highlighted in green.
- Green means that the value is able to be set changed in the Hover mode.
- Purple means that the value is set within Hover mode.
Editing Values
When Hover mode is enabled, the editor will display the state of that block as if it were being hovered, in a frozen state. This makes it easy to see the effect as if the block were being hovered over by the cursor.
Resetting Values
Resetting any currently set hover value can be done by clicking the reset icon next to the attribute label: 