How to set different types of cursors using CSS?-CSS Tutorial-php.cn

How to set different types of cursors using CSS?

WBOY

Release： 2023-09-22 19:45:03

forward

1597 people have browsed it

How to set different types of cursors using CSS?

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;
}

Copy after login

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>

Copy after login

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;
}

Copy after login

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;
}

Copy after login

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;
}

Copy after login

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;
}

Copy after login

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;
}

Copy after login

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;
}

Copy after login

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;
}

Copy after login

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;
}

Copy after login

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>

Copy after login

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>

Copy after login

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!