---
title: "How to Add Hover Effect With Custom Hover Class in WordPress Hover Card?"
url: https://nexterwp.com/docs/add-hover-effect-with-custom-hover-class-in-wordpress-hover-card/
date: 2024-12-16
modified: 2026-09-28
lang: en
author: "Aditya Sharma"
description: "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..."
image: https://nexterwp.com/wp-content/uploads/2024/12/add-hover-effect-with-custom-hover-class-in-wordpress-hover-card-1024x519.jpg
word_count: 602
---

# How to Add Hover Effect With Custom Hover Class in WordPress Hover Card?

## Key Takeaways

- Hover Card block uses Custom Hover to restyle a row when its parent class is hovered, with the rule shaped like .your-class:hover .this-row.
- Nexter Blocks Free and Nexter Blocks Pro both include the Hover Card block, and it is enabled under Nexter > Blocks in the WordPress dashboard.
- Custom Hover changes Background Style settings in the Hover tab, including background, border, radius, shadow, transform, and opacity; text rows change colour and text shadow, and image rows change border, radius, shadow, and opacity.
- Hover Card block requires matching Class Name and Custom Hover values exactly, then Render HTML; on mobile there is no hover, so important content stays visible.

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](https://nexterwp.com/docs/create-hover-card-animation-in-wordpress/).*

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/hover-card-animations-wordpress/)

## 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.

![Nexter Blocks Hover Card editor: text row Typography Hover tab with Custom Hover on and the hover class travel-card](https://nexterwp.com/wp-content/uploads/2026/09/hover-card-custom-hover-class-full.webp)

## Steps

- Add the **Hover Card** block to your page.

- Open the row already waiting under **Code Structure**, or press **+ Add Structure** for another one.

![The Code Structure repeater](https://nexterwp.com/wp-content/uploads/2026/09/hc-structure.webp)

- Choose the wrapper in **Open Tag**, and close it in **Close Tag**.

![The Open Tag setting](https://nexterwp.com/wp-content/uploads/2026/09/hc-opentag.webp)

- Give the outer row a class in **Class Name** — that is the thing visitors will hover.

![The Class Name field](https://nexterwp.com/wp-content/uploads/2026/09/hc-class.webp)

- 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.

![The Custom Hover option on the Hover tab](https://nexterwp.com/wp-content/uploads/2026/09/hc-hover.webp)

- Set the hover background, border, radius, shadow, transform or opacity.

- Press **Render HTML** to draw the structure, then publish.

![The Render HTML button](https://nexterwp.com/wp-content/uploads/2026/09/hc-render.webp)

> ***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 to `rgb(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.

## Related Docs

- [Hover Card block guide](https://nexterwp.com/docs/create-hover-card-animation-in-wordpress/)- [Build a custom layout](https://nexterwp.com/docs/create-a-custom-layout-with-the-hover-card-in-wordpress/)- [Multiple elements inside one element](https://nexterwp.com/docs/add-multiple-elements-inside-one-element-in-elementor-hover-card/)- [Text content](https://nexterwp.com/docs/use-the-text-content-with-the-hover-card-in-wordpress/)

## Frequently Asked Questions

**Q: What do I need before adding a hover effect with a custom hover class in WordPress Hover Card?**
A: A working Hover Card structure needs two things: a parent row with a class in Class Name, and an inner row that sits inside it. Nexter Blocks, part of Nexter, Nexter WP, NexterWP, nexterwp.com, Nexter Theme, Nexter Blocks, Nexter Extension, Nexter Suite, POSIMYTH Nexter, also requires the Hover Card block to be switched on under Nexter &gt; Blocks. The page also notes that a little HTML knowledge helps because the block builds markup from the rows you add.

**Q: Why isn't my hover effect working in the Hover Card block?**
A: The usual failure is a class mismatch. The parent row’s Class Name and the Custom Hover value must match letter for letter, and the styled row has to sit inside that parent in the structure. Nothing happens without both classes filled in. Another common miss is skipping Render HTML, because the block does not output the effect until that is pressed.

**Q: Why does only one row change when I hover the card?**
A: That happens when the inner row is using its own class instead of the wrapper’s class. The rule is built as .your-class:hover .this-row, so the hovered element has to be the parent container, not the row being styled. Several rows can watch the same parent class, which is how one hover can restyle an entire card instead of just one piece.

**Q: How do I make the hover change feel smooth instead of instant?**
A: Transition css is what softens the change. The page gives an example like all .3s linear, which turns a snap into an eased animation. That matters because Custom Hover can change background, border, radius, shadow, transform, opacity, or text styling all at once, and those properties look much better when they animate instead of jumping.

**Q: Does custom hover work on mobile phones?**
A: Hover is a mouse behavior, so it does not exist on a touch screen. The page treats hover as decoration on mobile and warns not to hide anything important behind it. That means any critical content should stay visible without needing a pointer state to reveal it.

**Q: What kind of elements can use Custom Hover in the Hover Card block?**
A: Custom Hover works across different row types inside the card. The page lists Any rows under Background Style &gt; Hover tab for background, border, radius, shadow, transform, and opacity; Text rows for colour and text shadow; and Image rows for border, radius, shadow, and opacity. It also works on any ancestor that contains the row, not just the immediate parent.