---
title: "How to Style the Different Block Hover States in WordPress?"
url: https://qa.nexterwp.com/docs/how-to-style-the-different-block-hover-states-in-wordpress/
date: 2025-06-11
modified: 2026-04-14
author: "Aditya Sharma"
description: "Are you looking to add a different style to your block when you hover over it?  Adding a different style for the hover state for different blocks is a great..."
word_count: 295
---

# How to Style the Different Block Hover States in WordPress?

## Key Takeaways

- Nexter Blocks provides a Hover tab under the Style tab for customizing hover states of specific block elements.
- Users can apply different hover styles and effects to block containers via the Advanced tab in Nexter Blocks.
- The Button, Advanced Typography, Infobox, and Blockquote blocks in Nexter Blocks allow for extensive customization of hover styles and effects.

Are you looking to add a different style to your block when you hover over it? 

Adding a different style for the hover state for different blocks is a great way to make your WordPress website feel more interactive and visually appealing.

With Nexter Blocks, you can easily add beautiful hover states to its different blocks.

## How to Add Hover Style in WordPress

In different blocks of Nexter Blocks, you’ll find the **Hover** tab under the **Style** tab for specific elements of the block.

From here, you can add a different style for the hover states.

![](https://qa.nexterwp.com/wp-content/uploads/2025/06/block-hover-style.png)

You can also add different hover styles and effects to the container of a specific block from the **Advanced** tab.

> *Note: From the Nexter Extra tab, you can *[*add different hover effects to a block*](https://qa.nexterwp.com/docs/add-advanced-tab-in-wordpress/#How-to-Add-Hover-Effect-to-any-WordPress-Block)*.*

## Examples of Block Hover States in WordPress

Let’s see some block examples from Nexter Blocks, where you’ll see the hover style option.

### Button Hover State Example in WordPress

For the [Button](https://qa.nexterwp.com/nexter-blocks/blocks/wordpress-button) block, you can add a hover style for the button text, background, and border color.

### Advanced Typography Hover State Example in WordPress

In the [Advanced Typography](https://qa.nexterwp.com/nexter-blocks/blocks/wordpress-advanced-typography/) block, you can change the text color, add text shadow, add different CSS filters, add custom CSS transform, and you can also add different overlay effects on hover, and much more.

### Infobox Hover State Example in WordPress

In the [Infobox](https://qa.nexterwp.com/nexter-blocks/blocks/wordpress-infobox/) block, you can add a hover style and effects to different elements such as title, description, background, icon, image, etc, from the Style tab.

### Blockquotes Hover State Example in WordPress

In the [Blockquote](https://qa.nexterwp.com/nexter-blocks/blocks/wordpress-blockquote-block/) block, you can add a hover style to text and background from the **Style** tab.

These are a few examples of the hover style options you’ll find in different blocks of the Nexter Blocks.