How to Change Your Cursor Using Both CSS and JavaScript

One of the great benefits of web design is that you can change a lot of dynamics on a website, such as: the font (and its size), the background color/image, and other media that other web designers use to make their website artistic and unique. You can also modify the affects of how you (or your website viewers) can interact with the website that you are creating. One way to do this is to change the cursor to different symbols, and in this tutorial, I will show you how to change this using both CSS (Cascading Style Sheets) and JavaScript.

The cursor is commonly associated as the arrow or pointer that you move around by the moving the mouse attached to your computer. Apart from the default arrow which the user sees the majority of the time, there are various other cursors that you can use:

auto        move           no-drop      col-resize
all-scroll  pointer        not-allowed  row-resize
crosshair   progress       e-resize     ne-resize
default     text           n-resize     nw-resize
help        vertical-text  s-resize     se-resize
inherit     wait           w-resize     sw-resize

To change the cursor using CSS, there are two methods that you can utilizing using the “cursor” element with the values listed above:

  1. Inline:
    a:hover { cursor: inherit; }
  2. Embedded:
    <a href="link.html" style="cursor: not-allowed;">Do Not Enter</a>

If you are heavily involved with the scripting language of JavaScript in your website’s development, you can also modify the cursor that hovers over different elements on your website by using JavaScript as well. I have provided the method below that you can use within your website’s HTML code with embedded JavaScript coding. To vary the cursor, you can use the various cursor options listed in the table above as well.

<a href="links.html" onMouseOver="this.style.cursor='w-resize';">Resize Me</a>

Integrating different cursors into your website using CSS and/or JavaScript is a great way to bring a diverse look to your viewer’s cursor on your website, and also give the viewer different roadsigns and instructions on your website without explanation.

Published
Categorized as Design

By Chad Sweely

Chad Sweely is a staff writer and Flash Designer for FlashNewz.

Leave a comment