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:031600browse
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!