Quick Tip: How to Manipulate the Cursor Appearance With CSS

In this quick tip, we’ll learn how to customize the cursor appearance with CSS. We’ll be changing our cursor into arrows to make navigating a slideshow easier. To better understand it, we’ll walk through two separate examples.

Note: the goal of this article isn’t to exhaustively cover the cursor property’s syntax. For a more thorough examination, be sure to check out the resources at the end of the tutorial.

Example #1

For the first example, we’ll discuss how to change the cursor image depending on the mouse position.

Here’s the demo we’re going to build in action:

1. The HTML

We start with a simple image:

<img src="IMG_SRC" alt="">

2. The CSS

Next, we define two CSS classes which hold the cursor images:

.cursor-prev {
  cursor: url(cursor-prev.cur), auto; /*IE & Edge*/
  cursor: url(cursor-prev.svg) 16 16, auto; /*Rest browsers*/
}

.cursor-next {
  cursor: url(cursor-next.cur), auto; /*IE & Edge*/
  cursor: url(cursor-next.svg) 16 16, auto; /*Rest browsers*/
}

Notice that for each rule we specify two cursor declarations. The first declaration of each rule targets Microsoft’s browsers, while the second one targets other browsers. All values point to an image, with the auto keyword value as a fallback.  

It’s worth mentioning that we can specify more than one custom URL or image. A browser will try to load them based on the order defined in the values. In other words, initially it will try to load the first image. If that image isn’t available for some reason, it will try to load the second one, and so on. Finally, if none of the images exist, the fallback keyword will be used.

Before we move on, let’s highlight a few current limitations (also according to my tests) and explain why we set two separate declarations:

• Microsoft’s browsers only support CUR and ANI as formats.
• Microsoft’s browsers don’t allow for setting the origin of the cursor image. If that happens, the cursor image and the rest of the property are ignored. In our case, for the non-Microsoft browsers, we set the image origin to the center (images are 32x32).

3. The JavaScript

When all page assets are ready, the init function is executed. 

Inside that function, we first retrieve the image width.

Next, each time we hover over the image, we do the following things:

• Get the X coordinate of the mouse pointer relative to the image—not relative to the browser window.
• Remove all classes from the image.
• Add the appropriate class to the image depending on the mouse position. If the mouse position exceeds the half image width, we add the cursor-next class, otherwise the cursor-prev class is added.

The code responsible for all this behavior is as follows:

window.addEventListener("load", init);

function init() {
  const img = document.querySelector("img");
  const {width} = img.getBoundingClientRect();
  const halfImgWidth = width / 2;

  img.addEventListener("mousemove", function(e) {
    const xPos = e.pageX - img.offsetLeft;
    this.classList.remove("cursor-prev", "cursor-next");
    if (xPos > halfImgWidth) {
      this.classList.add("cursor-next");
    } else {
      this.classList.add("cursor-prev");
    }
  });
}

Example #2

For the second example, we’ll use the demo built in a previous post. Take a look:

Here, the position and appearance of the navigation arrows look like this:

Let’s customize them to make for easier navigation. Each of the arrows should cover half of the carousel width, and their height should be equal to the carousel height. Plus, we’ll take advantage of the cursor property to set the arrows’ icons.

Here’s the required CSS:

.owl-carousel .owl-nav [class*=owl-] {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  margin: 0;
}

.owl-carousel .owl-nav .owl-prev {
  left: 0;
  cursor: url(cursor-prev.cur), move;
  cursor: url(cursor-prev.svg) 16 16, move;
}

.owl-carousel .owl-nav .owl-next {
  right: 0;
  cursor: url(cursor-next.cur), move;
  cursor: url(cursor-next.svg) 16 16, move;
}

.owl-carousel .owl-nav svg {
  display: none;
}

Notice that the cursor images come from our previous example. The only difference is that we specify the move keyword value as a fallback in case the associated image cannot be loaded.

Here’s the result:

Your Challenge (Should You Choose to Accept It)

This technique works well in our example, apart from one thing. The navigation arrows are stacked above the slides’ text, preventing us from being able to click the call-to-action buttons. 

Normally, a simple fix could be to add a positive z-index to that text (and give it position: relative). However, this solution won’t work because the text and arrows are in different stacking contexts (use the browser inspector to see it). 

• CSS
  What You May Not Know About the Z-Index Property
  Steven Bradley

Again, that problem occurs for our demo. In your projects, your structure may differ (e.g. you have only images or the text is underneath the image) and you may not face that issue. Additionally, you'll probably use another carousel with a different markup.

In any case, a way to solve that issue is via JavaScript. So, each time the custom cursor is within the boundaries of the target button/text, the associated arrow receives a negative z-index or disappears. 

Try to figure out this fix yourself, and post your solution in the comments!

Conclusion

In this quick tip, we covered how to manipulate the cursor appearance with CSS. As we saw, this can be challenging as not all browsers support the same syntax, but by adding styles to the cursor, we’re able to enhance the user experience.

Further Reading

• The definition of the cursor property in the CSS Basic User Interface Module Level 3 (CSS3 UI)
• Using URL values for the cursor property
• How to Make Multi-Preview Thumbnails With JavaScript Mouse Events