From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/nl/web/css/cursor/index.html | 333 +++++++++++++++++++++++++++++++++++++ 1 file changed, 333 insertions(+) create mode 100644 files/nl/web/css/cursor/index.html (limited to 'files/nl/web/css/cursor/index.html') diff --git a/files/nl/web/css/cursor/index.html b/files/nl/web/css/cursor/index.html new file mode 100644 index 0000000000..89504857f5 --- /dev/null +++ b/files/nl/web/css/cursor/index.html @@ -0,0 +1,333 @@ +--- +title: cursor +slug: Web/CSS/cursor +tags: + - CSS + - CSS eigenschappen + - Cursor + - Custom Cursor + - Reference + - UI + - mouse + - pijl + - pointer +translation_of: Web/CSS/cursor +--- +
{{CSSRef}}
+ +

het CSS-eigenschap cursor geeft aan welke muiscursor moet worden weergegeven wanneer de muisaanwijzer zich boven een element bevindt.

+ +
{{EmbedInteractiveExample("pages/css/cursor.html")}}
+ + + +

Syntax

+ +
/* Keyword value */
+cursor: pointer;
+cursor: auto;
+
+/* URL, with a keyword fallback */
+cursor: url(hand.cur), pointer;
+
+/* URL and coordinates, with a keyword fallback */
+cursor: url(cursor1.png) 4 12, auto;
+cursor: url(cursor2.png) 2 2, pointer;
+
+/* Global values */
+cursor: inherit;
+cursor: initial;
+cursor: unset;
+
+ +

De eigenschap cursor wordt opgegeven als geen of meer <url> waarden, gescheiden door komma's, gevolgd door één verplichte zoekwoordwaarde. Elke <url> zou naar een afbeeldingsbestand moeten wijzen. De browser probeert de eerste opgegeven afbeelding te laden, terug te vallen naar de volgende als dit niet kan, en terug te vallen naar de sleutelwoordwaarde als er geen afbeeldingen kunnen worden geladen (of als geen enkele waarde is opgegeven).

+ +

Elke <url> kan optioneel worden gevolgd door een paar spaties gescheiden nummers die de coördinaten  <x><y> representeren. Hiermee wordt de hotspot van de cursor ingesteld ten opzichte van de linkerbovenhoek van de afbeelding.

+ +

Bijvoorbeeld , dit specifeerd twee afbeeldingen die gebruikmaken van <url> waarden, voorzien van <x><y> coördinaten voor de tweede en terugvallen op de progress sleutelwoordwaarde als geen van beide afbeeldingen kunnen worden geladen:

+ +
cursor: url(one.svg), url(two.svg) 5 5, progress;
+ +

Values

+ +
+
<url>
+
Een url(…) of een door komma's gescheiden lijst url(…), url(…), …, wijzend naar een afbeeldingsbestand. Meer dan één {{cssxref ("<url>")}} kan als fallbacks worden aangeboden, voor het geval sommige cursorbeeldtypen niet worden ondersteund. Een niet-URL-fallback (een of meer sleutelwoorden) moet aan het einde van de fallback-lijst staan. Zie URL-waarden gebruiken voor de cursoreigenschapsing voor meer informatie.
+
<x> <y> {{experimental_inline}}
+
Optionele x- en y-coördinaten. Twee niet-unitaire niet-negatieve getallen van minder dan 32.
+
Keyword values
+
+

Beweeg uw muis over waarden om hun live uiterlijk in uw browser te zien:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CategorieCSS valueActualDescription
AlgemeenautoDe browser bepaalt de cursor die moet worden weergegeven op basis van de context. bv, text bij zwevende tekst.
defaultdefault.gifDe platform afhankelijke basis cursor. Het is meestal een pijl.
noneEr wordt geen cursor weergegeven.
Links & statuscontext-menucontext-menu.pngEen contextmenu is beschikbaar.
helphelp.gifHelp-informatie is beschikbaar.
pointerpointer.gifHet element kan worden geactiveerd door erop te klikken. Dit wordt bijvoorbeeld gebruikt, bij het zweven boven links. Typisch een afbeelding van een hand.
progressprogress.gifHet programma is bezig in de achtergrond, de gebruiker kan nog steeds een interactie aangaan met het interface (dit integenstelling met wait).
waitwait.gifHet programma is bezig en de gebruiker kan geen interactie ondergaan met het interface (dit in tegenstelling met progress). Is soms een afbeelding van een zandloper of van een horloge.
Selectioncellcell.gif +

De tabel cel kan geslecteerd worden.

+
crosshaircrosshair.gif +

Kruis cursor, vaak gebruikt om een selectie in een bitmap aan te duiden.

+
texttext.gifDe tekst kan worden geselecteerd. Meestal in de vorm van een I-balk.
vertical-textvertical-text.gifDe verticale tekst kan worden geslecteerd. Meestal in de vorm van een zijdelingse I-beam.
Drag & dropaliasalias.gifEen alias of shortcut wordt gecreëerd.
copycopy.gifIets kan worden gekopieerd.
movemove.gifIets kan worden verplaatst.
no-dropno-drop.gifEen item mag niet op de huidige locatie worden geplaatst.
+ {{bug("275173")}}: Op Windows en Mac OS X, no-drop is hetzelfde als not-allowed.
not-allowednot-allowed.gifIets kan niet worden gedaan.
Resize & scrollingall-scrollall-scroll.gifIets kan gescrold worden in elke richting (pannend).
+ {{bug("275174")}}: Op Windows, all-scroll is hetzelfde als move.
col-resizecol-resize.gifDe item/kolom groote kan verticaal worden aangepast. Vaak weergegeven als pijlen die links en rechts wijzen met een verticale balk tussen beide.
row-resizerow-resize.gifDe item/kolom groote kan horizontaal worden aangepast. Vaak weergegeven als pijlen die boven en onder wijzen met een horizontale balk tussen beide.
n-resizeExample of a resize towards the top cursor +

Een rand kan bewogen worden. Bijvoorbeeld de  se-resize cursor wordt gebruikt waneer een beweging start van de zuid-oost hoek van een box.

+ +

In sommige omgevingen wordt een gelijk bi-directioneel rezise cursor weergegeven.Bijvoorbeeld, n-resize ens-resize zijn hetzelfde als ns-resize.

+
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.gifBi-directioneel resize cursor.
ns-resize6-resize.gif
nesw-resize1-resize.gif
nwse-resize4-resize.gif
Zoomzoom-inzoom-in.gif +

Iets kan worden in- of uitvergroot.

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

Iets kan worden vastgepakt. (Gesleept worden om te verplaatsen)

+
grabbinggrabbing.gif
+
+
+ +

Formal syntax

+ +
{{csssyntax}}
+
+ +

Usage notes

+ +

Hoewel de specificaties geen grootte limitaties defineerd voor cursor, kunnen individuele{{Glossary("user agent", "user agents")}} kiezen dit wel te doen. Cursor aanpassingen die gebruik maken van afbeeldingen die groter zijn dan de size range gesuporteerd door de browser worden in het algemeen genegeerd.

+ +

Controleer de {{anch("Browser compatibility")}} tabel voor notities i.v.m. cursor grootte limieten.

+ +

Examples

+ +
.foo {
+  cursor: crosshair;
+}
+
+.bar {
+  cursor: zoom-in;
+}
+
+/* A fallback keyword value is required when using a URL */
+.baz {
+  cursor: url("hyper.cur"), auto;
+}
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Basic UI', '#cursor', 'cursor')}}{{Spec2('CSS3 Basic UI')}}Toevoeging van verschillend sleutelwoorden and positionerings syntaxt voor url().
{{SpecName('CSS2.1', 'ui.html#cursor-props', 'cursor')}}{{Spec2('CSS2.1')}}Initiële definitie.
+ +

{{cssinfo}}

+ +

Browser compatibility

+ + + + + +

{{Compat("css.properties.cursor")}}

+ + + +

See also

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