What is the cursor attribute of css? Use of cursor attribute

The content of this article is to introduce to you what is the cursor attribute of CSS? Use of cursor attribute. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

First of all, let’s understand what the cursor attribute is? what's the effect?

The cursor attribute is the cursor attribute in CSS. It specifies the type of mouse cursor that can be used when the mouse is located on the application element, that is: specifying the type (shape) of the cursor to be displayed.

We can set the cursor to one of many predefined cursor types via the cursor attribute, or to an image (as in the example below).

Note: The cursor attribute is only valid for devices with pointing devices (such as mice). It has no effect on touch devices.

The cursor attribute is used to provide visual feedback and cues to the user in order to deliver certain functionality on the element, which is often important for providing a better user experience.

Depending on the browser and operating system, the cursor value defined in CSS can present different effects. For example, some browsers (such as Firefox on Windows 7) will display the move (usually used to indicate that an element is draggable) cursor as a four-way arrow, while other browsers (such as Firefox on Mac OS X) will display Hand cursor. In this case, if you want the cursor to be a specific cursor that looks exactly the same across all browsers and platforms, you may want to use an image instead of the default CSS keyword.

Official Grammar

Syntax:

cursor: [ [<URI> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit ;

Initial: Auto

Applies to: All elements

Animation: None

New CSS3 syntax:

##In CSS3, additional values ​​and options have been added to the cursor attribute, let’s take a look:

cursor: [ [ <URI> [<x> <y>]?,]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing ] ]；

Note:

1. Not all browsers support all of the above values, and not all values ​​look the same in all browsers and operating systems. .

2. Image cursor (custom cursor)

: one or more comma-separated reference images

url() points to the image to be used as the cursor.

cursor：url（例如1：.svg #linkcursor），url（例如2： .cur），auto ;

Note: Non-URL standard cursor keywords must be provided at the end of the fallback list.

: Define coordinates

Use numerical values ​​without units, negative values ​​are not allowed; these values ​​specify the coordinates of the cursor hotspot. The first number is the x coordinate and the second number is the y coordinate. For example, the following:

cursor: url(some-cursor.png) 2 15, pointer;

Sets the cursor's hotspot to (2,15) pixels starting from the upper left corner (0,0).

If not specified, the coordinates of the hotspot are read from the file itself (for CUR and XBM files) or set to the upper left corner of the image.

Let’s look at an image cursor:

3. Commonly used cursor shapes

none: Define whether the cursor is Display

is usually presented as an arrow: default, auto, context-menu

is usually presented as a hand shape: pointer, grab, grabbing, hand

help: is usually presented as a question mark or balloon

Waiting to load: progress (a spinning beach ball, or an arrow with a watch or hourglass), wait (a watch or hourglass)

indicates direction or movement:

e- resize, ne-resize, n-resize, nw-resize, w-resize, sw-resize, s-resize, se-resize, ew-resize, ns-resize, nesw-resize, nwse-resize, col-resize, row-resize,, all-scroll, move

means prohibition: no-drop, not-allowed

Browser support

The following versions are supported:

* indicates a required prefix.

Summary: The above is the entire content of this article. You can compile it yourself and see the cursor shape defined by each attribute value of the cursor attribute. I hope it will be helpful to everyone's learning. More related video tutorials are recommended: css3 tutorial!

The above is the detailed content of What is the cursor attribute of css? Use of cursor attribute. For more information, please follow other related articles on the PHP Chinese website!