Shulou(Shulou.com)06/01 Report--

This article mainly shows you the "cursor properties in css3 how to change the shape of the cursor", the content is easy to understand, well-organized, hope to help you solve your doubts, the following let Xiaobian lead you to study and learn how to change the shape of the cursor in the cursor attribute in css3 "this article.

First, let's look at how the cursor property changes the shape of the cursor.

The basic syntax for the css3cursor attribute:

Cursor: []?,] * [auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-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 | grab]]

Note:

1. The cursor attribute applies to all elements

2. The cursor property is valid only for devices with pointer devices (such as mice); it has no effect on touch devices.

3. Not all browsers support all property values of the cursor property, and all property values may not display the same effect in all browsers and operating systems.

Let's take a look at the shape of the cursor that can be set by these property values of the cursor property.

Image cursors (custom cursors)

:

One or more comma-separated url () is used to point to the image to be used as the cursor. The user agent retrieves the cursor url () from the first. If the user agent cannot process the first cursor of the cursor list, it must try to process the cursor list, and so on. If the user agent cannot process any of the provided images (see browser support), you must use the cursor keyword. End of the list. Optional and coordinates identify the exact location of the pointer position (that is, hot spot) in the image.

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

:

Use unitless numbers less than 32, and 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.

Example:

Cursor:url (some-cursor.png) 215

Let's look at an example of an image cursor:

Css Code:

.custom {

Cursor:url (http://tympanus.net/codrops-playground/assets/images/cssref/properties/cursor/clock-cursor.png),url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/cursor/clock-cursor.cur),pointer;

}

Universal cursor (arrowhead)

Default: default cursor, usually arrowhead.

Auto: determines the cursor to display based on the current context. For example, text is displayed when text hovers.

None: does not render the cursor for the element to display the cursor.

Example:

.auto {

Cursor:auto

}

.default {

Cursor:default

}

.none {

Cursor:none

}

1.gif

Links and status cursors

Context-menu: objects under the cursor can use the context menu. It is usually rendered as an arrow with a small figure similar to a menu.

Only IE10 and later versions implement this feature on Windows.

Help: this cursor usually appears as a question mark or balloon. It indicates that the object under the cursor can use help.

Pointer: the cursor is the pointer that indicates the link.

Progress: progress indicator. Indicates that the program is performing some processing, but the difference in wait is that the user can still interact with the program. It usually appears as a spinning beach ball or an arrow with a watch or hourglass.

Wait: this cursor is usually rendered as a watch or hourglass. It indicates that the program is busy and the user should wait.

Example:

. context-menu {

Cursor:context-menu

}

.help {

Cursor:help

}

.pointer {

Cursor:pointer

}

.progress {

Cursor:progress

}

.wait {

Cursor:wait

}

2.gif

Select the cursor

Cell: this cursor usually appears as a bold plus sign with a dot in the middle. It means that you can select a unit or a group of units.

Crosshair: a simple cross line (for example, a short line segment similar to the "+" symbol). It is commonly used to represent a 2D bitmap selection mode.

Text:

The cursor is usually rendered as a vertical I-beam. The user agent can automatically display the horizontal I-beam / cursor of vertical-text vertical text (for example, the same as the keyword), or for this purpose, the I-beam / cursor at any angle is used for text rendered at any particular angle. It represents text that can be selected.

Vertical-text: this cursor is usually rendered as a horizontal I-beam. It represents vertical text that can be selected.

Example:

.cell {

Cursor:cell

}

.crosshair {

Cursor:crosshair

}

.text {

Cursor:text

}

. vertical-text {

Cursor:vertical-text

}

3.gif

Drag and drop the cursor

Alias: this cursor usually appears as an arrow with a small curved arrow next to it. It represents an alias / shortcut to create.

Copy: this cursor usually appears as an arrow with a small plus sign next to it. It indicates what to copy.

Move: indicates what you want to move. How you render this cursor depends on the browser, as described in the above description. It usually appears as a four-way arrow or a hand-like shape.

No-drop: this cursor is usually rendered as a hand or pointer with a small circle and a straight line. It indicates that the dragged item cannot be deleted at the current cursor position.

Not-allowed: this cursor usually appears as a circle with a straight line. It indicates that the requested operation will not be performed.

Example:

.alias {

Cursor:alias

}

.copy {

Cursor:copy

}

.move {

Cursor:move

}

. no-drop {

Cursor:no-drop

}

. not-allowed {

Cursor:not-allowed

}

4.gif

Zoom the cursor:

Zoom-in (zoom in), zoom-out (zoom out):

Indicates that something can be zoomed in or out and is usually presented as a magnifying glass with a "+" or "-" in the center of the glass.

Example:

. zoom-in {

Cursor:-webkit-zoom-in

Cursor:zoom-in

}

. zoom-out {

Cursor:-webkit-zoom-out

Cursor:zoom-out

}

5.gif

Grab the cursor

Grab 、 grabbing:

Indicates that elements can be grabbed (dragged to move). Grab is an open hand "ready to drag", and dragging is a "closed" hand that looks like grabbing something.

Example:

.grab {

Cursor:-webkit-grab

Cursor:grab

}

.grabbing {

Cursor:-webkit-grabbing

Cursor:grabbing

}

7.gif

Zoom and scroll cursors

Emurresizewneresizewaynwresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresizewresize

Indicates that you want to move some edges. For example, se-resize when moving from the start use the corner of the box southeast of the cursor.

Ew-resize,ns-resize,nesw-resize,nwse-resize

Represents a two-way resizing cursor. These cursor types are usually rendered as two-way arrows in different directions.

Col-resize:

This cursor is usually rendered as left and right arrows, separated by vertical bars. It means that the project / column can be resized horizontally. It is similar to the cursor you see in programs such as MSExcel.

Row-resize:

This cursor usually appears as up and down arrows, separated by horizontal bars. It means that items / lines can be resized vertically. It is similar to the cursor you see in programs such as MSExcel.

All-scroll:

This cursor usually appears as up, down, left, and right arrows, with a point in the middle. It means that you can scroll something in any direction.

Example:

. n-resize {

Cursor:n-resize

}

. ne-resize {

Cursor:ne-resize

}

. e-resize {

Cursor:e-resize

}

. se-resize {

Cursor:se-resize

}

. s-resize {

Cursor:s-resize

}

. sw-resize {

Cursor:sw-resize

}

. w-resize {

Cursor:w-resize

}

. nw-resize {

Cursor:nw-resize

}

. se-resize {

Cursor:se-resize

}

. ew-resize {

Cursor:ew-resize

}

. ns-resize {

Cursor:ns-resize

}

. nesw-resize {

Cursor:nesw-resize

}

. nwse-resize {

Cursor:nwse-resize

}

. col-resize {

Cursor:col-resize

}

. row-resize {

Cursor:row-resize

}

. all-scroll {

Cursor:all-scroll

}

The above is all the content of the article "how to change the shape of the cursor in the cursor property in css3". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.