How To Change Mouse Cursor On Hover In WordPress

2022-01-07 | Tutorials, WordPress | 0 comments

Choose between +30 cursors with a little bit of CSS. Here's a step by step tutorial.
Skribent: Victor Duse
By Victor Duse

Did you know that there are over 30 different cursors that you can customize by using the cursor CSS property? Here’s the complete list and how to apply it on your WordPress website.

The three most common cursors are the default arrow, the pointer and the text cursor. Just hover the bold words for a live preview. See the complete Cursor Cheat Sheet below for the complete list.

Related post: How to replace the cursor with a custom image in WordPress

You can customize the cursor to improve the user experience. Some form plugins, for example, use old grey submit buttons with the default arrow cursor on hover. Why not style the button and swap to a pointer hand instead? And you could of course highlight an element with a crosshair or a question mark just because it’s fun.

1. Changing the cursor for an existing CSS class

In this example I’m going to change the mouse cursor from the the default arrow to the more adequate hand pointer when hovering a WPUF Post Form submission button.

Before

The default cursor in the WPUF Post Form

After

Changing to a hand pointer cursor with CSS
  1. Go to Appearance » Customizer from your WordPress dashboard
  2. Expand the Additional CSS tab
  3. Find the class that you want to target by using for example the Chrome Inspector (watch the video for a step by step tutorial)
  4. In this example, the button class is .wpuf-submit-button so I’ll add the CSS snippet below to apply a hand pointer on hover:
    .wpuf-submit-button {
    cursor:pointer;
    }
  5. Save and preview in frontend.

Troubleshooting: In some cases you might need to add !important to override the existing CSS. Only use this sledge hammer if the original snippet doesn’t work. Example:

.wpuf-submit-button {
cursor:pointer !important;
}

 

2. Changing the cursor with inline CSS

You can also change the cursor by adding inline CSS in your pagebuilder, for example Divi Builder, Gutenberg, Classic Editor or Elementor. Make sure that you edit the HTML code by using the Text tab and not the Visual tab.

HTML with inline CSS

Hover <a href="https://divimundo.com/" style="cursor:help;" >this link</a> to see a help cursor.
<ol>
    <li style="cursor:grab;">This list item will display a grab cursor</li>
    <li style="cursor:progress">This list item will display a progress spinner</li>
</ol>
<div style="cursor:move">This entire DIV will display a move cursor.</div>

 

Live preview

Hover this link to see a help cursor.

  1. This list item will display a grab cursor
  2. This list item will display a progress spinner
This DIV will display a move cursor.

CSS Cursor Cheat Sheet With Live Preview

Hover the boxes below for a live preview of the different cursors. I’ve highlighted the most common once.

cursor: alias

cursor: all-scroll

cursor: auto

cursor: cell

cursor: context-menu

cursor: col-resize

cursor: copy

cursor: crosshair

cursor: default

cursor: e-resize

cursor: ew-resize

cursor: grab

cursor: grabbing;

cursor: help

cursor: move

cursor: n-resize

cursor: ne-resize

cursor: nesw-resize

cursor: ns-resize

cursor: nw-resize

cursor: nwse-resize

cursor: no-drop

cursor: none

cursor: not-allowed

cursor: pointer

cursor: progress

cursor: row-resize

cursor: s-resize

cursor: se-resize

cursor: sw-resize

cursor: text

cursor: wait

cursor: zoom-in

cursor: zoom-out

That’s all for today!

I hope that you enjoyed this post. Subscribe to DiviMundo on YouTube and join our Facebook group for more crisp content on WordPress and web design.

Related post: How to replace the cursor with a custom image in WordPress

Free course: Create a website from scratch with Divi

Related posts

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.