Interaction extension · Pro
Hover a project card and a round "View" badge follows the mouse. Cursor Hover Effect adds a styled, cursor-following label to any Elementor 4 element, so visitors know what a click will do before they click.
The nearest free option is Elementor 4's hover state on Classes, which can restyle the card itself but cannot add a label that follows the cursor.
The short answer
Cursor Hover Effect is an Animation Addons for Elementor extension that adds an Elementor custom cursor hover effect: when a visitor hovers an element, a styled box with your text, such as "View" or "Drag", follows the cursor. You set the text, font size, colors, width, height, padding and border from a panel section in Elementor 4.
| Plan | Pro |
|---|---|
| Type | Interaction (cursor) |
| Works on | Elementor 4 Heading, Paragraph, Button, Image, SVG, Flexbox, Div Block and Grid, plus Animation Addons atomic widgets such as Posts, Loop Grid, Nested Slider (including its track and slides), Flip Box and Video. |
| Main controls | Enable, Text, Font Size, Text Color, Background, Width, Height, Padding, Border, Enable on Editor |
| Engine | GSAP (part of the GSAP-driven extension set; runtime ships in Animation Addons Pro) |
| Editor preview | Enable on Editor (off by default) adds a Play button for testing on the canvas. |
| Limits | Text label only (no image or icon field), one per element. Border radius is set in px. Needs a pointer, so touch screens show nothing. Without an active Pro licence, settings save but nothing shows. Elementor 4.0+. |
| Plugin version | Animation Addons for Elementor 4.3 · Last updated October 2026 |
Demo variations
Every demo uses Cursor Hover Effect from Animation Addons Pro on Elementor 4's own elements. The settings on each card are a good place to start.
A grid of case-study cards; hovering any card shows a black circle reading "View" that follows the cursor.
Hovering the slider shows a white pill reading "Drag" with a thin border, telling desktop visitors they can drag.
A large video cover; the cursor carries a bright "Play" disc instead of a static play icon.
A list-style blog index; each post row shows a small square "Read" tag at the cursor.
Three service tiles in a row; hovering a tile shows a soft mint circle reading "Book".
A full-width lifestyle image; hovering it shows a cream "Shop the look" tag with a dark outline that follows the cursor.
Features
Every point below is a real control in the Cursor Hover Effect panel section or part of how it works. Nothing here needs custom code.
Text puts any word or short phrase in the cursor box: "View", "Drag", "Play", "Read". Each element can carry its own label.
Font Size (px, em or rem), Text Color and Background style the label. The defaults are white text on black at 16px.
Width and Height (120px by default, with quick picks from 80 to 200 for Height) set the size. Border sets style, width, color and a px radius: half the width makes a circle, a smaller radius a pill. Padding adds breathing room.
Enable is set per breakpoint, so the effect can stay off on touch devices. Enable on Editor adds a Play button so you can check the label against the card while you design.
Step by step
Five steps from switching it on to publishing. The bold names are the exact labels you will see on screen.
Get Animation Addons ProIn WordPress, open Animation Addon › Settings › Extensions and check that Cursor Hover Effect is on.
Edit the page in Elementor 4 and select the card, image, button or container that should show the label.
Open the Cursor Hover Effect section and turn on Enable, then type the label in Text.
On the Style tab, set Font Size, Text Color, Background, Width, Height, Padding and Border.
Turn on Enable on Editor and press Play to check it, turn Enable off on tablet and mobile if you like, then publish.
Honest comparison
Elementor 4's free hover state on Classes is the right way to change an element's color, border or background when hovered, and Elementor Pro's Interactions add a Hover trigger for fade, slide and scale. Neither adds anything to the cursor itself.
| Need | Elementor 4 hover state / Interactions | Animation Addons Cursor Hover Effect |
|---|---|---|
| Plan | Hover state free; Hover trigger in Pro Interactions | Animation Addons Pro (works with Elementor Free) |
| Text label that follows the cursor | No | Yes, via Text |
| Different label per element | No | Yes |
| Label styling (size, colors, padding, border) | No | Yes |
| On/off per device | Free Interactions apply to all devices | Enable per breakpoint |
Compared with Elementor 4.3.3 (September 2026).
Site-wide custom cursor plugins replace the whole pointer everywhere. Cursor Hover Effect is scoped: the normal cursor stays, and the label appears only on the elements you choose.
Who it's for
The people who get the most out of it, and what they use it for.
Who want the "View" cursor that award-style portfolios use.
Pointing visitors to videos and demos.
Turning images into clear "Shop" prompts.
Adding a premium detail without writing cursor-tracking code.
FAQ
Select the element in Elementor 4, open the Cursor Hover Effect section from Animation Addons, turn on Enable and type a label such as "View". Then set its size, colors and border on the Style tab. The label follows the cursor while it is over that element. Cursor Hover Effect is part of Animation Addons Pro.
Add the Animation Addons Cursor Hover Effect to the card's Div Block or Flexbox and enter "View" in the Text field. Set Width and Height to the same value, such as 120px, then give the Border a radius of half that, 60px, for a circle. White text on a black Background is the default look.
No. Animation Addons Cursor Hover Effect is applied per element: the label only appears while the cursor is over an element where you enabled it. Everywhere else the visitor's normal cursor works as usual, which keeps links and form fields familiar.
Touch screens have no cursor, so there is nothing for the label to follow. The Animation Addons Cursor Hover Effect Enable switch is set per breakpoint, so turn it off on tablet and mobile. Make sure the card is still clearly clickable on touch, for example with a visible button or link text.
The Animation Addons Cursor Hover Effect label is text only, styled with Text, Font Size, Text Color, Background, Width, Height, Padding and Border. If you want a photo to follow the cursor, use the Image Hover extension instead, which shows a chosen image with motion presets.
The Animation Addons Cursor Hover Effect label is a visual hint layered over your page; the card's heading, link and text stay in the HTML, so search engines and screen readers are unaffected. Do not rely on the label as the only clue that something is clickable, since keyboard users will not see it. Animation Addons Pro also includes a Reduced Motion option.
Animation Addons Cursor Hover Effect appears on Elementor 4 Heading, Paragraph, Button, Image, SVG, Flexbox, Div Block and Grid, and on Animation Addons atomic widgets. It needs Elementor Free 4.0 or later and Animation Addons Pro, not Elementor Pro. Without an active Pro licence the settings save but no label appears. Enable on Editor adds a Play button for testing.
More answers in the FAQ · Documentation · Free vs Pro
Pairs well with
What works well with Cursor Hover Effect on the same page or template.
Cursor Hover Effect adds a styled label that follows the cursor on the elements you pick, with per-device control and live editor preview.
Use Elementor 4's free hover state for color and background changes; upgrade when you want a label that follows the cursor.
