Home > Article > Web Front-end > How to set different types of cursors using CSS?

How to set different types of cursors using CSS?

WBOYforward: 2023-09-22 19:45:031586browse

CSS (Cascading Style Sheets) is a powerful tool for designing the visual appearance of your website, including cursor styling. The cursor is an important aspect of web design. It helps provide visual feedback to users and enables them to interact effectively.

What is a cursor?

The cursor is a position indicator that indicates the user's current location on the screen. It is also known as the "caret". It plays an important role in user interface design. In CSS, we can set the cursor as needed to provide visual feedback to the user indicating what actions can be performed at a specific location.

grammar

css selector {
   courser : courser type;
}

Now we will explore the different types of cursors that can be set using CSS

Default cursor

In web design, the default cursor is the most common cursor type, used when no other cursor is specified. It looks like an arrow pointer on the screen, indicating that the user can click on the element.

Example 1

Here is an example of setting the default cursor.

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         text-align: center;
      }
      a {
         cursor: default;
      }
   </style>
</head>
<body>
   <h2>This is an example of default cursor</h2>
   <a href="https://www.tutorialspoint.com/index.htm" class="my-link">Click Here</a>
</body>
</html>

PointerCursor

The pointer cursor is represented by a hand pointing to the link. When a user hovers over a link, it indicates that the element is clickable. We can use the following code to set the pointer cursor −

css-elector {
   cursor: pointer;
}

Text cursor

The text cursor is a flashing horizontal or vertical line that appears as an I-shaped cursor pointer. When a user hovers over text or a text input field, it indicates that they have edited or selected text. We can use the following code to set the text cursor -

css-elector {
   cursor: text;
}

Crosshair cursor

The crosshair cursor simply appears as horizontal and vertical lines for the crosshair pointer. The crosshair cursor is used to select a specific area on the screen, such as in image editing tools. We can set the crosshair cursor using the following code -

css-elector {
   cursor: crosshair;
}

Move cursor

The mobile cursor appears on the screen in the form of four arrow pointers. It is typically used for dragging and dropping an element to indicate that it can be moved. We can use the following code to set the moving cursor -

css-elector {
   cursor: move;
}

Cursor not allowed

A cursor not allowed indicates that the requested operation will not be performed. It appears in the form of a circle with diagonal lines. We can use the following code to set the cursor which is not allowed -

css-elector {
   cursor: not-allowed;
}

Progress Cursor

The progress cursor is displayed in the form of a rotating circle. It indicates that the program is busy in the background, but the user can still interact with the interface. We can use the following code to set the progress cursor -

css-elector {
   cursor: progress;
}

Wait for cursor

Wait for the cursor to appear as a rotating windmill. It indicates that the program is busy and unable to interact with the user interface. We can use the following code to set the wait cursor -

css-elector {
   cursor: wait;
}

Help Cursor

The help cursor is displayed as a question mark pointer. Used when the user needs help, such as when clicking a help icon or button. We can set the help cursor using the following code -

css-elector {
   cursor: help;
}

Example 2

Here is an example of how to set the different types of cursors using CSS.

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         text-align:center;
         background-color: lightgreen;
      }
      div{
         margin: 3px;
         padding: 5px;
      }
   </style>
</head>
<body>
   <h2>Setting the different types of cursors using CSS</h2>
   <h3>Move the mouse over the words to see the cursor change:</h3>
   <div style="cursor:default">Default</div>
   <div style="cursor:text">Text</div>
   <div style="cursor:pointer">Pointer</div>
   <div style="cursor:crosshair">Crosshair</div>
   <div style="cursor:move">Move</div>
   <div style="cursor:not-allowed">not-allowed</div>
   <div style="cursor:progress">Progressd</div>
   <div style="cursor:wait">wait</div>
   <div style="cursor:help">help</div>
   <div style="cursor:e-resize">e-resize</div>
   <div style="cursor:ne-resize">ne-resize</div>
   <div style="cursor:nw-resize">nw-resize</div>
   <div style="cursor:n-resize">n-resize</div>
   <div style="cursor:se-resize">se-resize</div>
   <div style="cursor:sw-resize">sw-resize</div>
   <div style="cursor:s-resize">s-resize</div>
   <div style="cursor:w-resize">w-resize</div>
</body>
</html>

Use CSS to customize the cursor

In addition to the standard cursors provided by CSS, we can also use custom cursors. By using custom cursors, we can add a unique touch to our website.

Example 3

The following is an example of using CSS to create a custom cursor.

<!DOCTYPE html>  
<html>  
<head>
   <style>
      body{
         text-align: center;
      }
      .my-cursor {
         width: 200px;
         margin: auto;
         background-color: lightblue;
         cursor: url(https://cdn.icon-icons.com/icons2/1875/PNG/96/cursor_120340.png), auto;
      }
   </style>
</head>
<body>
   <h2>Custom Cursors with CSS</h2>
   <div class="my-cursor">
      <h3>Move the mouse over to see the cursor change</h3>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text </p>
   </div>
</body>
</html>

In the above example, we have created a div element with a class of my-cursor. We then set the cursor property to URL ( https://cdn.icon-icons.com/icons2/1875/PNG/96/cursor_120340.png), auto. This means that the browser uses the cursor_120340.png file as a custom cursor and falls back to the default cursor if the file is not found or fails to load.

in conclusion

Here, we discussed the different types of CSS cursors. It is a powerful tool for web designers to customize cursor styles and provide visual feedback for user interactions. By using the above code, we can set different types of cursors in CSS.

The above is the detailed content of How to set different types of cursors using CSS?. For more information, please follow other related articles on the PHP Chinese website!

css auto 指针 using class Property 样式表 https

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：4 different ways to center elements using CSSNext article：4 different ways to center elements using CSS

See more

How to set different types of cursors using CSS?

What is a cursor?

grammar

Default cursor

Example 1

PointerCursor

Text cursor

Crosshair cursor

Move cursor

Cursor not allowed

Progress Cursor

Wait for cursor

Help Cursor

Example 2

Use CSS to customize the cursor

Example 3

in conclusion

Related articles