Hit enter after type your search item
Home / CSS / What is Cursor Property in CSS?

What is Cursor Property in CSS?

CSS cursor property allows using various types of mouse cursors as the mouse hovers an element. For example, the default behavior of a link as the mouse hovers over it is the hand cursor.

You may set a different cursor for the link by using cursor property of CSS.

Syntax for using the cursor property

cursor: value;

So, you may assign a value to the cursor keyword to apply in different elements.

Following values can be used for the cursor property:

  • Default
  • None
  • Pointer
  • Crosshair
  • Copy
  • Move
  • Text
  • vertical-text
  • e-resize
  • n-resize
  • ne-resize
  • nw-resize
  • s-resize
  • se-resize
  • sw-resize
  • w-resize
  • ew-resize
  • ns-resize
  • nesw-resize
  • nwse-resize
  • col-resize
  • row-resize
  • context-menu
  • help
  • progress
  • wait
  • zoom-in
  • zoom-out
  • no-drop
  • alias
  • cell
  • not-allowed
  • all-scroll
  • grab
  • grabby
  • auto

in the next section, we will see the usage of these values in different elements. I will also show, how to customize the CSS pointer value.

An example of cursor property with various values

See the example code and output by clicking the image or link below where you can see almost all cursor values. Just bring the mouse over the respective text and you will see the icon accordingly.

css cursors

See online demo and code

The example of CSS pointer default replacement

Sometimes you may need to use your own custom pointer or another cursor type for reflecting the theme of your website.

In that case, you may replace the default pointer by your own cursor by specifying the URL() in the cursor property.

In the example below, the pointer cursor is replaced by a custom image. Bring the mouse over the demo text and custom pointer appears:

See online demo and code

Using font-awesome as custom CSS cursor

All we know is the font-awesome is a powerful and beautiful font/icon library that you may use in different elements of your website. For example, using the icons in buttons, navigation bars, tables etc. is made easier as using this library.

What about using font awesome icons as the custom CSS cursor? How to do it?

Well, we probably don’t have a way to use these icons straight-forward as the cursor in CSS like replacing the default pointer etc.

One of the ways is to download a specific font/icon and create an image (.png, .cur) etc. and then use that icon as shown in the above demo.

The other way of using those icons is a third party plug-in and its demo/usage is shown below.

The example of font awesome pointer

In this example, one line of code is used for the pointer icon from the font-awesome library.

See online demo and code

The example of using all plug-in options

By using this cool plug-in for the custom cursor, you may set the size, color, and rotation of the cursor as well.

See online demo and code

How to set up jQuery Awesome Cursor polug-in

By using the above example codes from the demo pages, you can see the CDN links for all required files.

You need to add three links in the head section of the web page:

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css”>

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>

<script src=”https://cdn.rawgit.com/jwarby/jquery-awesome-cursor/master/dist/jquery.awesome-cursor.min.js”></script>

This is followed by writing the code in the <script> section for specifying the icon and setting the options like color, size, and rotation.

For more options of adding the plug-in (bower, npm etc.), visit the plug-in page below.

Credit: jquery-awesome-cursor

This div height required for enabling the sticky sidebar