Home >> css >> CSS Cursors

CSS Cursors

This Tutorial will help you how to design mouse pointer.

Changing the Look of Cursor

CSS cursor property defines cursor type (i.e., mouse pointer) when the mouse moves over a particular area or a link on the web page. Mostly the browsers display the mouse pointer over any blank part of a web page; the gloved hand is shown over any linked or clickable item, and the edit cursor is displayed over any text or text field. However, CSS lets you redefine these properties to display various types of cursors.

Example :

h1 {
    cursor: move;
}
p {
    cursor: text;
}

Try With Example

The different cursors that most browsers accept are exhibited in the table below. You can reveal the cursor by placing your mouse pointer over the "TEST" link in the output column.

Creating a Customized Cursor

You can also have completely customized cursors.

The CSS cursor property manages a comma-separated list of user-defined cursor values followed by the generic cursor. In case the first cursor is incorrectly specified or can't be found, then it will use the next cursor in the comma-separated list, and so on until a usable cursor is found.

If the user-defined cursors are not valid or not supported by the browser, then it uses a generic cursor defined at the end of the list.

Tip: .cur format is the standard format that can be used for cursors. However, it is possible to convert images such as .jpg and .gif into .cur format using the online free image converter software.

Example:

<!DOCTYPE html>
<html>
<head>
           <title>CSS Cursors</title>
<style>
       a:hover {cursor:url("/assets/example/CSS/custom.cur"), default;} 
  </style>
</head>
<body>
           <div>
             <h1>Welcome to CSS Cursors Tutorial</h1>
             <hr>
             <a href="https://readytocode.net/">Move mouse over me</a>
             
          </div>
           
</body>

In the example mentioned above, custom.gif and custom.cur is the custom cursor file uploaded to your server space. The default is the generic cursor that will be used if the custom cursor is missing or isn't supported by the viewer's browser.

Warning:

If you do not define the generic cursor at the end of the list while declaring a custom cursor, then the custom cursor will not render correctly.

-Advertisement-

Looks	Values	Example	Output
	Default	Cursor default a:hover{cursor:default;}	TEST
	Pointer	Cursor pointer a:hover{cursor:pointer;}	TEST
	Text Cursor	text a:hover{cursor:text;}	TEST
	Wait Cursor	wait a:hover{cursor:wait;}	TEST
	Help Cursor	help a:hover{cursor:help;}	TEST
	Progress Cursor	progress a:hover{cursor:progress;}	TEST
	Crosshair Cursor	crosshair a:hover{cursor:crosshair;}	TEST
	Move Cursor	move a:hover{cursor:move;}	TEST
	Custom Cursor url()	a:hover {cursor:url("custom.cur"), default;}	TEST