From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/it/web/css/cursor/index.html | 388 +++++++++++++++++++++++++++++++++++++ 1 file changed, 388 insertions(+) create mode 100644 files/it/web/css/cursor/index.html (limited to 'files/it/web/css/cursor/index.html') diff --git a/files/it/web/css/cursor/index.html b/files/it/web/css/cursor/index.html new file mode 100644 index 0000000000..5284daf295 --- /dev/null +++ b/files/it/web/css/cursor/index.html @@ -0,0 +1,388 @@ +--- +title: cursor +slug: Web/CSS/cursor +tags: + - CSS + - CSS Property + - Layout + - NeedsBrowserCompatibility + - NeedsLiveSample + - NeedsMobileBrowserCompatibility + - NeedsTranslation + - Reference + - TopicStub + - Web +translation_of: Web/CSS/cursor +--- +
{{CSSRef}}
+ +

Summary

+ +

The cursor CSS property specifies the mouse cursor displayed when the mouse pointer is over an element.

+ +

{{cssinfo}}

+ +

Syntax

+ +
Formal syntax: {{csssyntax("cursor")}}
+
+ +

Values

+ +
+
<uri>
+
A url(…) or a comma separated list url(…), url(…), …, pointing to an image file. More than one {{cssxref("<uri>")}} may be provided as fallback, in case some cursor image types are not supported. A non-URL fallback (one ore more of the other values) must be at the end of the fallback list. See Using URL values for the cursor property for more details.
+
<x> <y> {{ experimental_inline() }}
+
Optional x- and y-coordinates. Two unit-less non-negative numbers less than 32.
+
Keyword values
+
+

Move mouse over value for testing:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CategoryCSS value Description
Generalauto The browser determines the cursor to display based on the current context.
+ E.g. equivalent to text when hovering text.
defaultdefault.gifDefault cursor, typically an arrow.
none No cursor is rendered.
Links & statuscontext-menucontext-menu.pngA context menu is available under the cursor.
+ Only IE 10 and up have implemented this on Windows: {{ Bug("258960") }}.
helphelp.gifIndicating help is available.
pointerpointer.gifE.g. used when hovering over links, typically a hand.
progressprogress.gifThe program is busy in the background but the user can still interact with the interface (unlike for wait).
waitwait.gifThe program is busy (sometimes an hourglass or a watch).
Selectioncellcell.gifIndicating that cells can be selected.
crosshaircrosshair.gifCross cursor, often used to indicate selection in a bitmap.
texttext.gifIndicating text can be selected, typically an I-beam.
vertical-textvertical-text.gifIndicating that vertical text can be selected, typically a sideways I-beam.
Drag and dropaliasalias.gifIndicating an alias or shortcut is to be created.
copycopy.gifIndicating that something can be copied.
movemove.gifThe hovered object may be moved.
no-dropno-drop.gifCursor showing that a drop is not allowed at the current location.
+ {{ bug("275173") }} on Windows, "no-drop is the same as not-allowed".
not-allowednot-allowed.gifCursor showing that something cannot be done.
Resize & scrollingall-scrollall-scroll.gifCursor showing that something can be scrolled in any direction (panned).
+ {{ bug("275174") }} on Windows, "all-scroll is the same as move".
col-resizecol-resize.gifThe item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating.
row-resizerow-resize.gifThe item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.
n-resizeExample of a resize towards the top cursorSome edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box.
e-resizeExample of a resize towards the right cursor
s-resizeExample of a resize towards the bottom cursor
w-resizeExample of a resize towards the left cursor
ne-resizeExample of a resize towards the top-right corner cursor
nw-resizeExample of a resize towards the top-left corner cursor
se-resizeExample of a resize towards the bottom-right corner cursor
sw-resizeExample of a resize towards the bottom-left corner cursor
ew-resize3-resize.gifIndicates a bidirectional resize cursor.
ns-resize6-resize.gif
nesw-resize1-resize.gif
nwse-resize4-resize.gif
Zoomzoom-inzoom-in.gif +

Indicates that something can be zoomed (magnified) in or out.

+
zoom-outzoom-out.gif
Grabgrabgrab.gif +

Indicates that something can be grabbed (dragged to be moved).

+
grabbinggrabbing.gif
+
+
+ +

Examples

+ +
.foo { cursor: crosshair; }
+
+/* use prefixed-value if "zoom-in" isn't supported */
+.bar { cursor: -webkit-zoom-in;  cursor: zoom-in; }
+
+/* standard cursor value as fallback for url() must be provided (doesn't work without) */
+.baz { cursor: url(hyper.cur), auto }
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 UI', '#cursor', 'cursor') }}{{ Spec2('CSS3 Basic UI') }}Addition of several keywords and the positioning syntax for url().
{{ SpecName('CSS2.1', 'ui.html#cursor-propsy', 'cursor') }}{{ Spec2('CSS2.1') }}Initial definition.
+ +

Browser compatibility

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChrome (WebKit)Firefox (Gecko)Internet ExplorerOperaSafari
auto, crosshair, default, move, text, wait, help,
+ n-resize, e-resize, s-resize, w-resize,
+ ne-resize, nw-resize, se-resize, sw-resize		1.01.0 (1.0)4.07.01.2
pointer, progress1.01.0 (1.0 | 1.7)6.07.x1.2 | 3.0
url() - See Using URL values1.0 (523)1.5 (1.8);
+ OS X: 4.0 (2.0)		6.0{{ CompatUnknown }}3.0
Positioning syntax for url() values {{ experimental_inline() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatNo }}{{ CompatUnknown }}{{ CompatVersionUnknown() }}
not-allowed, no-drop, vertical-text, all-scroll,
+ col-resize, row-resize		1.0 (522)1.5 (1.8)6.010.63.0
alias, cell, copy,
+ ew-resize, ns-resize, nesw-resize, nwse-resize		1.0 (522)1.5 (1.8)10.010.63.0
context-menuOS X, Linux: 1.0 (522)OS X, Linux: 1.5 (1.8)10.010.63.0
none5.0 (533)3.0 (1.9)9.0{{ CompatUnknown }}5.0
inherit1.01.08.09.01.2
zoom-in, zoom-out1.0 (522) {{ property_prefix("-webkit-") }}1.0 (1.4) {{ property_prefix("-moz-") }}
+ 24.0		{{ CompatNo }}11.63.0 {{ property_prefix("-webkit-") }}
grab, grabbing1.0; Windows: 22.0 {{ property_prefix("-webkit-") }}1.5 (1.8) {{ property_prefix("-moz-") }}
+ 27.0		{{ CompatNo }}{{ CompatUnknown }}4.0 {{ property_prefix("-webkit-") }}
+ +

See also

+ + -- cgit v1.2.3-54-g00ecf