The useful hover is rarely on the thing you are pointing at.
You hover the card; the button inside it lights up. Custom Hover is how the Hover Card block does that — you name a parent class, and the row you are editing restyles itself whenever that parent is hovered.
For every Dynamic Device setting in one place, see the Hover Card block guide.
Before You Start
- Edition: Free — the Hover Card block works in Nexter Blocks (free) and in Nexter Blocks Pro.
- Block to enable: Hover Card, switched on under Nexter > Blocks in your WordPress dashboard.
- A little HTML. This block builds markup out of the rows you add, so it helps to know what a tag is and which tag wraps which.
- A structure with a wrapper — an outer row with a class in Class Name, and the row you want to animate inside it.
Steps
- Add the Hover Card block to your page.
- Open the row already waiting under Code Structure, or press + Add Structure for another one.
- Choose the wrapper in Open Tag, and close it in Close Tag.
- Give the outer row a class in Class Name — that is the thing visitors will hover.
- Open the inner row, switch Background on, and pick the Hover tab.
- Switch Custom Hover on and type the outer row’s class into it.
- Set the hover background, border, radius, shadow, transform or opacity.
- Press Render HTML to draw the structure, then publish.
Type the parent’s class, not this row’s. The rule generated is
.your-class:hover .this-row— the class belongs to the element being hovered.
Where To Find It
| Row content | Where Custom Hover lives | What it changes |
|---|---|---|
| Any | Background Style → Hover tab | Background, border, radius, shadow, transform, opacity |
| Text | The text styling section | Colour and text shadow |
| Image | The image styling section | Border, radius, shadow, opacity |
How It Behaves
- The block writes a CSS rule for you in the shape
.tpgb-block-<id> .your-class:hover .tp-repeater-item-<row>, output in a small style element with the block. - It works on any ancestor, not just the immediate parent — the hovered element simply has to contain the row.
- Measured. A span inside a hovered wrapper went from a transparent background to
rgb(255, 0, 0)and from opacity 1 to 0.5; a text row went from grey torgb(0, 0, 255). - Use Transition css on the row to make the change ease rather than snap.
- Several rows can watch the same parent class, so one hover can move the whole card at once.
Limitations
- Nothing happens without a class. Both the parent’s Class Name and the Custom Hover field must be filled in, and they must match exactly.
- Hover is a mouse idea. On a phone there is no hover, so never hide anything a visitor needs behind one.
- Only the settings in that section change on hover — size and spacing stay where they are.
- Nothing appears until Render HTML is pressed.
Troubleshooting
Nothing changes when I hover
The two classes probably do not match. Check the parent row’s Class Name and the Custom Hover value letter for letter, and make sure the styled row really is inside that parent in your structure.
Only the row I point at reacts
You typed the row’s own class. Type the wrapper’s class instead — the rule targets a parent being hovered.
The change is instant and jumpy
Add a value to Transition css on the row, for example all .3s linear.
It works on desktop but not on mobile
There is no hover on a touch screen. Keep the important content visible and treat hover as decoration.
