Setting the Mouse Cursor

| March 29, 2020

There are a number of standard cursors that are used depending upon where on the web page the mouse is located. The default cursor is the arrow, but if held over a hyperlink, the cursor usually turns into a pointing hand.

The cursor property allows you to use CSS to change the cursor image when the mouse is moved over a particular element. For example, if you hover your mouse over the block below, you’ll see that the cursor changes into a pizza slice:

Move the mouse over this box.

The CSS to change the cursor to an image looks like this:

.pizza {
   cursor: url(/wp-content/uploads/2020/03/42559-e1565325592349.png),auto;
}

The DIV with the red borders was assigned a class of pizza, so the rule comes into play when the mouse moves over it. You want to make sure that the image you’re using has dimensions of 32×32 to insure compatibility across all browsers.

If you want to make the image the default cursor for the page instead of just a certain element, then try using the body element as a selector:

body {
   cursor: url(/wp-content/uploads/2020/03/42559-e1565325592349.png),auto;
}

As an example, pick Whole Page from the options below to see how the cursor will change to a pizza slice for the whole page:


If you do change the default cursor for the entire page, then you may want to use an altered image for hyperlinks so your users know if they are positioned over one.

Leave a Reply

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