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

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*/
}

The following are the values of the CSS cursor property-

##45 67##8cross 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 selectedIndicates 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>

output

Sr.No	Value and description
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 means you can select a cell (or a group of cells)
	context-menuIndicates that the context menu is available
	col-resizeIndicates that the column can be resized horizontally
	CopyIndicates the content to be copied
It is rendered as a crosshair
	It renders the default cursor
	means resize the box The edge of td>
	means Adjust the cursor size in both directions
	Indicates that things can be grabbed
	means that something can be grabbed
	means helpful
	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 td>	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
	p> ##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
Indicates that a border should be moved downward and left (south/west)	##31 Text
	strong>32 URL
	33 vertical-text
34 w-resize
	35 p> Wait
	##36 Enlarge
	37 Zoom out
	38 Initial
	39 Inheritance
	The following is an example of implementing CSS cursor properties Example

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

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

A Little Reminder That Pseudo Elements are Children, Kinda.Apr 19, 2025 am 11:39 AM

Here's a container with some child elements:

Menus with 'Dynamic Hit Areas'Apr 19, 2025 am 11:37 AM

Flyout menus! The second you need to implement a menu that uses a hover event to display more menu items, you're in tricky territory. For one, they should

Improving Video Accessibility with WebVTTApr 19, 2025 am 11:27 AM

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."- Tim Berners-Lee

Weekly Platform News: CSS ::marker pseudo-element, pre-rendering web components, adding Webmention to your siteApr 19, 2025 am 11:25 AM

In this week's roundup: datepickers are giving keyboard users headaches, a new web component compiler that helps fight FOUC, we finally get our hands on styling list item markers, and four steps to getting webmentions on your site.

Making width and flexible items play nice togetherApr 19, 2025 am 11:23 AM

The short answer: flex-shrink and flex-basis are probably what you’re lookin’ for.

Position Sticky and Table HeadersApr 19, 2025 am 11:21 AM

You can't position: sticky; a

Weekly Platform News: HTML Inspection in Search Console, Global Scope of Scripts, Babel env Adds defaults QueryApr 19, 2025 am 11:18 AM

In this week's look around the world of web platform news, Google Search Console makes it easier to view crawled markup, we learn that custom properties

IndieWeb and WebmentionsApr 19, 2025 am 11:16 AM

The IndieWeb is a thing! They've got a conference coming up and everything. The New Yorker is even writing about it:

See all articles

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 agoByDDD

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

2 weeks agoByDDD

Where to find the Crane Control Keycard in Atomfall

3 weeks agoByDDD

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

1 months agoByDDD

Roblox: Dead Rails - How To Complete Every Challenge

3 weeks agoByDDD

Hot Tools

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.