CSS: changing cursor

CSS: changing cursor
 
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


You can use styles to change the appearance of the cursor and select one of the fifteen available options.

Before you change the cursor, decide whether its use would be in place. Many users might be misled by these changes, for example, instead of the traditional "hand" that appears when you hover over a link, something else pops up. In most cases, it is better to leave everything by default.

Table 1 shows the possible cursors. Their appearance may be different from the final result, that depends on the settings of the operating system.

Table 1. Cursors used on a web-page.

Appearance

Value

Test

Example

css cursor default

default

TEST

cursor: default

css cursor crosshair

crosshair

TEST

cursor: crosshair

css cursor pointer

pointer

TEST

cursor: pointer

css cursor move

move

TEST

cursor: move

css cursor text

text

TEST

cursor: text

css cursor wait

wait

TEST

cursor: wait

css cursor help

help

TEST

cursor: help

css cursor n-resize

n-resize

TEST

cursor: n-resize

css cursor ne-resize

ne-resize

TEST

cursor: ne-resize

css cursor e-resize

e-resize

TEST

cursor: e-resize

css cursor se-resize

se-resize

TEST

cursor: se-resize

css cursor s-resize

s-resize

TEST

cursor: s-resize

css cursor sw-resize

sw-resize

TEST

cursor: sw-resize

css cursor w-resize

w-resize

TEST

cursor: w-resize

css cursor nw-resize

nw-resize

TEST

cursor: nw-resize

The syntax to create a cursor is very simple. You must assign the class and in it use one of cursors types, as described in the table. Example 1 below shows how you can change the cursor, when hovering over different links.

Example 1. Cursor change when positioned over a link.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <style type="text/css">
      .movelink { cursor: move; }
      .helplink { cursor: help; }
    </style>
  </head>
  <body>
    <a href="mypage.php" class="movelink">MOVE THIS TEXT</a>
    <br>
    <a href="mypage.php" class="helplink">HELP</a>
  </body>
</html>

The result of this example is shown below.

If you want to change the cursor for the entire web page, and not just for links, use the selector BODY (Example 2).

Example 2. Changing the appearance of the cursor for the entire web page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <style type="text/css">
      body { cursor: ne-resize; }
    </style>
  </head>
  <body>
    <a href="mypage.php"> MOVE THIS TEXT </a>
    <br>
    <a href="mypage.php"> HELP </a>
  </body>
</html>

You can also assign different cursors for specific areas on a Web page using tags <DIV> or <SPAN>. In that case, first choose the class and style, and then it is applied to a tag, for example, <SPAN>. This approach allows us to assign the style only once and then apply it to any desired location (example 3).

Example 3. Different cursors for different areas on a web page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <style type="text/css">
      .cross { cursor: crosshair; }
      .help { cursor: help; }
    </style>
  </head>
  <body>
    <span class="cross"> In this text, the mouse cursor changes to crosshair.</span>
    <br>
    <a href="help1.php" class="help">HELP 1</a><br>
    <a href="help2.php" class="help"> HELP 2</a><br>
    <a href="help3.php" class="help"> HELP 3</a>
  </body>
</html>

The result of this example is shown below.

In this text, the mouse cursor changes to crosshair.
HELP 1
HELP 2
HELP 3

 

Read also

Conditional comments for IE

Conditional comments for IE

How to write in HTML

How to write in HTML

Post comment

Quick navigation

basicuse.net
106160485398655174790
html5_css

General navigation