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

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 id="This-is-an-example-of-default-cursor">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 id="Setting-the-different-types-of-cursors-using-CSS">Setting the different types of cursors using CSS</h2>
   <h3 id="Move-the-mouse-over-the-words-to-see-the-cursor-change">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 id="Custom-Cursors-with-CSS">Custom Cursors with CSS</h2>
   <div class="my-cursor">
      <h3 id="Move-the-mouse-over-to-see-the-cursor-change">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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Grow A Garden - Complete Mutation Guide

3 weeks ago By DDD

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

How to fix KB5055612 fails to install in Windows 10?

3 weeks ago By DDD

Nordhold: Fusion System, Explained

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Blue Prince: How To Get To The Basement

4 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial

1664

CakePHP Tutorial

1423

Laravel Tutorial

1318

PHP Tutorial

1268

C# Tutorial

1248

Related knowledge

How to Create an Animated Countdown Timer With HTML, CSS and JavaScript Apr 11, 2025 am 11:29 AM

Have you ever needed a countdown timer on a project? For something like that, it might be natural to reach for a plugin, but it’s actually a lot more

HTML Data Attributes Guide Apr 11, 2025 am 11:50 AM

Everything you ever wanted to know about data attributes in HTML, CSS, and JavaScript.

A Proof of Concept for Making Sass Faster Apr 16, 2025 am 10:38 AM

At the start of a new project, Sass compilation happens in the blink of an eye. This feels great, especially when it’s paired with Browsersync, which reloads

While You Weren't Looking, CSS Gradients Got Better Apr 11, 2025 am 09:16 AM

One thing that caught my eye on the list of features for Lea Verou's conic-gradient() polyfill was the last item:

How to Build Vue Components in a WordPress Theme Apr 11, 2025 am 11:03 AM

The inline-template directive allows us to build rich Vue components as a progressive enhancement over existing WordPress markup.

A Comparison of Static Form Providers Apr 16, 2025 am 11:20 AM

Let’s attempt to coin a term here: "Static Form Provider." You bring your HTML

The Three Types of Code Apr 11, 2025 pm 12:02 PM

Every time I start a new project, I organize the code I’m looking at into three types, or categories if you like. And I think these types can be applied to

PHP is A-OK for Templating Apr 11, 2025 am 11:04 AM

PHP templating often gets a bad rap for facilitating subpar code — but that doesn't have to be the case. Let’s look at how PHP projects can enforce a basic

See all articles