Home > Article > Web Front-end > 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:
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)
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.
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, handhelp: 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
Browser support
The following versions are supported:
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!