--- title: "How to Change the Mouse Cursor for a Block in WordPress?" url: https://nexterwp.com/docs/change-the-mouse-cursor-for-a-block-in-wordpress/ date: 2024-12-16 modified: 2026-09-15 lang: en author: "Aditya Sharma" description: "Sometimes only one thing on the page should feel different under the pointer — a gallery, a map, a call to action. The Block cursor area changes the cursor for..." word_count: 401 --- # How to Change the Mouse Cursor for a Block in WordPress? ## Key Takeaways - Mouse Cursor block en Nexter Blocks Pro cambia el cursor de exactamente un bloque y deja el resto de la página igual cuando Cursor Area está en Block. - La colocación importa: el Mouse Cursor block va inmediatamente después del bloque objetivo, dentro del mismo Nexter Container, porque siempre afecta al bloque que está directamente encima. - El comportamiento es limitado: sin un bloque encima no hace nada, solo afecta al bloque inmediatamente anterior y en pantallas táctiles no aparece ningún cursor. Sometimes only one thing on the page should feel different under the pointer — a gallery, a map, a call to action. The Block cursor area changes the cursor for exactly one block and leaves the rest of the page alone. *For every Mouse Cursor setting in one place, see the [Mouse Cursor block guide](https://nexterwp.com/docs/add-a-custom-cursor-in-wordpress/).* [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-custom-cursors/) ## Before You Start - **Edition:** **Pro** — the Mouse Cursor block is part of Nexter Blocks Pro.- **Block to enable:** Mouse Cursor, switched on under **Nexter > Blocks** in your WordPress dashboard.- **A Nexter Container** holding the block you want to change. ## Steps - Add the **Mouse Cursor** block and click **Design from Scratch**. - Set **Cursor Area** to **Block**. ![The Cursor Area dropdown with Body, Row, Column and Block](https://nexterwp.com/wp-content/uploads/2026/09/mcursor-area.webp) - Put the Mouse Cursor block **immediately after** the block you want to change, inside the same Nexter Container. - Choose a **Type** and set it up. ![The Type dropdown with all four cursor types](https://nexterwp.com/wp-content/uploads/2026/09/mcursor-type.webp) - Publish, then move the mouse over that block and over the rest of the page. > ***Order matters.** The block changes the cursor for whatever sits directly above it. With nothing above it, it does nothing at all — no warning, no effect.* ## How It Behaves - **Only the block directly above is affected.** Measured: the paragraph before the Mouse Cursor block computed `cursor: grab` and was given the class `tpgb-mc-eff-e1e2_1530`, while other content on the page stayed `auto`.- The Mouse Cursor block itself is invisible to visitors.- Every Type works here — a following image or word can be limited to one block.- Two blocks can have different cursors: give each its own Mouse Cursor block, each placed straight after its target. ## Limitations - **Pro only.**- **With no block above it, nothing happens.** This is the most common mistake — the Mouse Cursor block placed first in a container silently does nothing.- It affects the one block immediately before it, not a range of blocks. For a whole section use " + a(ROW_DOC, "the row area") + "- **Touch screens have no cursor**, so phone and tablet visitors see none of this. ## Troubleshooting ### Nothing changes Check what sits directly above the Mouse Cursor block. If it is first in its container, there is no block for it to attach to. ### The wrong block changed It always takes the block immediately above. Move the Mouse Cursor block so it follows the one you meant. ### The whole page changed instead **Cursor Area** is on **Body**. Set it to **Block**. ## Related Docs - [Mouse Cursor block: all settings](https://nexterwp.com/docs/add-a-custom-cursor-in-wordpress/)- [Change the cursor for a row](https://nexterwp.com/docs/change-the-mouse-cursor-for-a-row-in-wordpress/)- [Follow text cursor](https://nexterwp.com/docs/add-a-follow-text-cursor-in-wordpress/) ## Frequently Asked Questions **Q: What do I need before changing the mouse cursor for a block in WordPress?** A: Nexter Blocks Pro is required, because the Mouse Cursor block is part of Nexter Blocks Pro. The target block also has to sit inside a Nexter Container, since the cursor effect attaches to the block directly above the Mouse Cursor block within that container. That setup matters because the block does not work as a page-wide effect, it only targets one block at a time. **Q: Why does nothing happen when I add the Mouse Cursor block?** A: The usual cause is placement. The Mouse Cursor block only affects the block immediately above it, so if it is first in a container there is nothing for it to attach to and it silently does nothing. In Nexter, POSIMYTH Nexter, Nexter WP, NexterWP, nexterwp.com, Nexter Theme, Nexter Blocks, Nexter Extension, and Nexter Suite this is the key gotcha: order matters more than anything else. **Q: How do I change the cursor for just one block instead of the whole page?** A: Set Cursor Area to Block. That keeps the effect limited to exactly one block and leaves the rest of the page alone. The Mouse Cursor block itself stays invisible to visitors, so the visible change comes from the target block above it. This is useful for things like a gallery, a map, or a call to action where only one element should feel different under the pointer. **Q: Can two different blocks have different mouse cursors on the same page?** A: Two blocks can have different cursors on the same page. Give each target its own Mouse Cursor block and place each one directly after its block inside the same Nexter Container. That separation matters because each Mouse Cursor block only controls the single block immediately above it, so you can scope effects cleanly without them bleeding into each other. **Q: What happens on phones and tablets when I use a mouse cursor effect?** A: Touch screens show none of this because phones and tablets do not have a cursor. The effect only makes sense for pointer-based devices, so mobile visitors will not see a hover cursor change at all. That makes this kind of styling best for desktop interactions where pointer feedback helps signal that one specific block behaves differently. **Q: What is the difference between changing the cursor for a block and changing it for a row?** A: A block cursor change affects one block immediately above the Mouse Cursor block, while a row-level change is meant for a whole section. If you need broader coverage than a single element, use [Change the cursor for a row](https://nexterwp.com/docs/change-the-mouse-cursor-for-a-row-in-wordpress/). For deeper settings on every Mouse Cursor option in one place, use [Mouse Cursor block: all settings](https://nexterwp.com/docs/add-a-custom-cursor-in-wordpress/).