www 101

All you need to know about the internet

Have a Question?

If you have any question you can ask below or enter what you are looking for!

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:

2. The CSS

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

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 32×32).

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:

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:

The default appearance of the navigation arrows

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.

The new appearance of the navigation arrows

Here’s the required CSS:

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). 

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