Use CSS to change the appearance of your cursor-CSS Tutorial-php.cn

Table of Contents

Syntax

Home

Web Front-end

CSS Tutorial

Use CSS to change the appearance of your cursor

王林

Sep 23, 2023 pm 02:53 PM

We can use CSS cursor properties to manipulate the cursor images of different elements in HTML documents.

Syntax

The syntax of CSS cursor property is as follows:
Selector {
   cursor: /*value*/
}

Copy after login

The following are the values of the CSS cursor property-

##45 67##8< td>cross Line9Default 10e-resize11ew-resize12Grab13Grab14Help15Move16n-resize17ne-resize 18new-resize##1920 nwse-resizeno -dropNoneNot allowedPointerProgress represents The program is busy (in progress) row- resizes-resizese-resizesw-resize indicates the text that can be selected with a comma Delimited list of URLs for custom cursors, with Universal Cursor mentioned at the end as fail-safeIndicates vertical text that can be selected< td>Indicates that the edge of the box moves to the left (west) Indicates that the program is busyIndicates something Can zoom inIt means that some content can be zoomed outIt sets the cursor properties to their default values. It inherits the cursor attribute from the parent element. Live demonstration

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: 5px;
   float: left;
}
#one {
   background-color: beige;
}
#two {
   background-color: lavender;
}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nw-resize {cursor: nw-resize;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
</style></head>
<body>
<div id="one">
<div class="nw-resize">left corner</div><div class="n-resize">up</div>
<div class="ne-resize">right corner</div>
</div>
<div id="two">
<div class="not-allowed">Not-allowed</div><div class="pointer">Pointer</div>
</div>
</body>
</html>

Copy after login

output

The above is the detailed content of Use CSS to change the appearance of your cursor. 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

Assassin's Creed Shadows: Seashell Riddle Solution

3 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

2 weeks ago By DDD

Where to find the Crane Control Keycard in Atomfall

3 weeks ago By DDD

Assassin's Creed Shadows - How To Find The Blacksmith And Unlock Weapon And Armour Customisation

1 months ago By DDD

Roblox: Dead Rails - How To Complete Every Challenge

3 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

Where is the login entrance for gmail email?

7606

CakePHP Tutorial

1387

What is the format of the account name of steam

win11 activation key permanent

nyt connections hints and answers

135

Related knowledge

Building an Ethereum app using Redwood.js and Fauna Mar 28, 2025 am 09:18 AM

With the recent climb of Bitcoin’s price over 20k $USD, and to it recently breaking 30k, I thought it’s worth taking a deep dive back into creating Ethereum

Vue 3 Apr 02, 2025 pm 06:32 PM

It's out! Congrats to the Vue team for getting it done, I know it was a massive effort and a long time coming. All new docs, as well.

Can you get valid CSS property values from the browser? Apr 02, 2025 pm 06:17 PM

I had someone write in with this very legit question. Lea just blogged about how you can get valid CSS properties themselves from the browser. That's like this.

A bit on ci/cd Apr 02, 2025 pm 06:21 PM

I'd say "website" fits better than "mobile app" but I like this framing from Max Lynch:

Stacked Cards with Sticky Positioning and a Dash of Sass Apr 03, 2025 am 10:30 AM

The other day, I spotted this particularly lovely bit from Corey Ginnivan’s website where a collection of cards stack on top of one another as you scroll.

Using Markdown and Localization in the WordPress Block Editor Apr 02, 2025 am 04:27 AM

If we need to show documentation to the user directly in the WordPress editor, what is the best way to do it?

Comparing Browsers for Responsive Design Apr 02, 2025 pm 06:25 PM

There are a number of these desktop apps where the goal is showing your site at different dimensions all at the same time. So you can, for example, be writing

Let's use (X, X, X, X) for talking about specificity Mar 24, 2025 am 10:37 AM

I was just chatting with Eric Meyer the other day and I remembered an Eric Meyer story from my formative years. I wrote a blog post about CSS specificity, and

See all articles

Sr.No	Value and description< /th>
1	alias Indicates an alias for something to be created
2	Full scroll It represents content that can be scrolled in any direction
3	Auto Default, the browser sets the cursor
	Cell< /p> means you can select a cell (or a group of cells)
	context-menu< strong> Indicates that the context menu is available
	col-resize Indicates that the column can be resized horizontally
	Copy Indicates the content to be copied
It is rendered as a crosshair
	It renders the default cursor
	means resize the box The edge of
	means Adjust the cursor size in both directions
	Indicates that things can be grabbed
	means that something can be grabbed < p>
	means helpful < p>
	means to move something
	means the edge of the box will move up (north)
	Indicates that the edge of the box should be moved up and to the right (North/East)
	means adjusting the cursor size in both directions
ns-resize	Indicates bidirectional adjustment of the cursor size
nw-resize	means the edge of the box moves up and to the left (north/west) ##21
	Indicates bidirectional resizing cursor 22
	means that the dragged item cannot be dragged and dropped here 23
	No cursor is rendered for element 24
	It means that the requested action will not be executed 25
	It is a pointer, representing a link ##26
	##27
indicates that Rows can be resized vertically	28
means moving the edges of the box Move down (south)	29
represents the box Edge moves down and to the right (south/east)	30< /p>
Indicates that a border should be moved downward and left (south/west)	##31 Text
	32 URL
	< /strong> 33 vertical-text
34 w-resize
	35 Wait
	##36 < /p>Enlarge
	37 Zoom out
	38 Initial
	39 Inheritance
	The following is an example of implementing CSS cursor properties Example