path: root/files/nl/web/css/cursor/index.html

---
title: cursor
slug: Web/CSS/cursor
tags:
  - CSS
  - CSS eigenschappen
  - Cursor
  - Custom Cursor
  - Reference
  - UI
  - mouse
  - pijl
  - pointer
translation_of: Web/CSS/cursor
---
<div>{{CSSRef}}</div>

<p>het <a href="/en-US/docs/Web/CSS">CSS</a>-eigenschap <strong><code>cursor</code></strong> geeft aan welke muiscursor moet worden weergegeven wanneer de muisaanwijzer zich boven een element bevindt.</p>

<div>{{EmbedInteractiveExample("pages/css/cursor.html")}}</div>

<p class="hidden">De bron voor dit interactieve voorbeeld is opgeslagen in een GitHub-repository. Als u wilt bijdragen aan het interactieve voorbeeldenproject, kunt u het klonen van <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> en stuur ons een pull-aanvraag.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="brush: css no-line-numbers">/* 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;
</pre>

<p>De eigenschap <code>cursor</code> wordt opgegeven als geen of meer <code><a href="#&lt;url>">&lt;url&gt;</a></code> waarden, gescheiden door komma's, gevolgd door één verplichte <a href="#Keyword values">zoekwoordwaarde</a>. Elke <code>&lt;url&gt;</code> 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).</p>

<p>Elke <code>&lt;url&gt;</code> kan optioneel worden gevolgd door een paar spaties gescheiden nummers die de coördinaten  <code><a href="#&lt;x> &lt;y>">&lt;x&gt;&lt;y&gt;</a></code> representeren. Hiermee wordt de hotspot van de cursor ingesteld ten opzichte van de linkerbovenhoek van de afbeelding.</p>

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

<pre class="brush: css">cursor: url(one.svg), url(two.svg) 5 5, progress;</pre>

<h3 id="Values">Values</h3>

<dl>
 <dt><a id="&lt;url>" name="&lt;url>"><code>&lt;url&gt;</code></a></dt>
 <dd>Een <code>url(…)</code> of een door komma's gescheiden lijst <code>url(…), url(…), …</code>, wijzend naar een afbeeldingsbestand. Meer dan één {{cssxref ("&lt;url&gt;")}} kan als fallbacks worden aangeboden, voor het geval sommige cursorbeeldtypen niet worden ondersteund. Een niet-URL-fallback (een of meer sleutelwoorden) <em>moet </em>aan het einde van de fallback-lijst staan. Zie <a href="/en-US/docs/CSS/Using_URL_values_for_the_cursor_property" title="Using_URL_values_for_the_cursor_property">URL-waarden gebruiken voor de cursoreigenschapsing </a>voor meer informatie.</dd>
 <dt><a name="&lt;x> &lt;y>"><code>&lt;x&gt;</code> <code>&lt;y&gt;</code> </a>{{experimental_inline}}</dt>
 <dd>Optionele x- en y-coördinaten. Twee niet-unitaire niet-negatieve getallen van minder dan 32.</dd>
 <dt><a id="Keyword values" name="Keyword values">Keyword values</a></dt>
 <dd>
 <p><em>Beweeg uw muis over waarden om hun live uiterlijk in uw browser te zien:</em></p>

 <table class="standard-table">
  <tbody>
   <tr>
    <th>Categorie</th>
    <th style="width: 7.5em;">CSS value</th>
    <th>Actual</th>
    <th>Description</th>
   </tr>
   <tr style="cursor: auto;">
    <td rowspan="3">Algemeen</td>
    <td><code>auto</code></td>
    <td></td>
    <td>De browser bepaalt de cursor die moet worden weergegeven op basis van de context. bv, <code>text</code> bij zwevende tekst.</td>
   </tr>
   <tr style="cursor: default;">
    <td><code>default</code></td>
    <td><img alt="default.gif" src="/@api/deki/files/3438/=default.gif" style="height: 26px; width: 26px;"></td>
    <td>De platform afhankelijke basis cursor. Het is meestal een pijl.</td>
   </tr>
   <tr style="cursor: none;">
    <td><code>none</code></td>
    <td></td>
    <td>Er wordt geen cursor weergegeven.</td>
   </tr>
   <tr style="cursor: context-menu;">
    <td rowspan="5" style="cursor: auto;">Links &amp; status</td>
    <td><code>context-menu</code></td>
    <td><img alt="context-menu.png" src="/@api/deki/files/3461/=context-menu.png" style="height: 26px; width: 26px;"></td>
    <td>Een contextmenu is beschikbaar.</td>
   </tr>
   <tr style="cursor: help;">
    <td><code>help</code></td>
    <td><img alt="help.gif" src="/@api/deki/files/3442/=help.gif" style="height: 26px; width: 26px;"></td>
    <td>Help-informatie is beschikbaar.</td>
   </tr>
   <tr style="cursor: pointer;">
    <td><code>pointer</code></td>
    <td><img alt="pointer.gif" src="/@api/deki/files/3449/=pointer.gif" style="height: 26px; width: 26px;"></td>
    <td>Het element kan worden geactiveerd door erop te klikken. Dit wordt bijvoorbeeld gebruikt, bij het zweven boven links. Typisch een afbeelding van een hand.</td>
   </tr>
   <tr style="cursor: progress;">
    <td><code>progress</code></td>
    <td><img alt="progress.gif" src="/@api/deki/files/3450/=progress.gif" style="height: 26px; width: 26px;"></td>
    <td>Het programma is bezig in de achtergrond, de gebruiker kan nog steeds een interactie aangaan met het interface (dit integenstelling met <code>wait</code>).</td>
   </tr>
   <tr style="cursor: wait;">
    <td><code>wait</code></td>
    <td><img alt="wait.gif" src="/@api/deki/files/3457/=wait.gif" style="height: 26px; width: 26px;"></td>
    <td>Het programma is bezig en de gebruiker kan geen interactie ondergaan met het interface (dit in tegenstelling met <code>progress</code>). Is soms een afbeelding van een zandloper of van een horloge.</td>
   </tr>
   <tr style="cursor: cell;">
    <td rowspan="4" style="cursor: auto;">Selection</td>
    <td><code>cell</code></td>
    <td><img alt="cell.gif" src="/@api/deki/files/3434/=cell.gif" style="height: 26px; width: 26px;"></td>
    <td>
     <p>De tabel cel kan geslecteerd worden.</p>
    </td>
   </tr>
   <tr style="cursor: crosshair;">
    <td><code>crosshair</code></td>
    <td><img alt="crosshair.gif" src="/@api/deki/files/3437/=crosshair.gif" style="height: 26px; width: 26px;"></td>
    <td>
     <p>Kruis cursor, vaak gebruikt om een selectie in een bitmap aan te duiden.</p>
    </td>
   </tr>
   <tr style="cursor: text;">
    <td><code>text</code></td>
    <td><img alt="text.gif" class="default" src="/files/3809/text.gif" style="height: 26px; width: 26px;"></td>
    <td>De tekst kan worden geselecteerd. Meestal in de vorm van een I-balk.</td>
   </tr>
   <tr style="cursor: vertical-text;">
    <td><code>vertical-text</code></td>
    <td><img alt="vertical-text.gif" src="/@api/deki/files/3456/=vertical-text.gif" style="height: 26px; width: 26px;"></td>
    <td>De verticale tekst kan worden geslecteerd. Meestal in de vorm van een zijdelingse I-beam.</td>
   </tr>
   <tr style="cursor: alias;">
    <td rowspan="5" style="cursor: auto;">Drag &amp; drop</td>
    <td><code>alias</code></td>
    <td><img alt="alias.gif" src="/@api/deki/files/3432/=alias.gif" style="height: 26px; width: 26px;"></td>
    <td>Een alias of shortcut wordt gecreëerd.</td>
   </tr>
   <tr style="cursor: copy;">
    <td><code>copy</code></td>
    <td><img alt="copy.gif" class="default" src="/@api/deki/files/3436/=copy.gif" style="height: 26px; width: 26px;"></td>
    <td>Iets kan worden gekopieerd.</td>
   </tr>
   <tr style="cursor: move;">
    <td><code>move</code></td>
    <td><img alt="move.gif" src="/@api/deki/files/3443/=move.gif" style="height: 26px; width: 26px;"></td>
    <td>Iets kan worden verplaatst.</td>
   </tr>
   <tr style="cursor: no-drop;">
    <td><code>no-drop</code></td>
    <td><img alt="no-drop.gif" class="lwrap" src="/@api/deki/files/3445/=no-drop.gif" style="float: left; height: 26px; width: 33px;"></td>
    <td>Een item mag niet op de huidige locatie worden geplaatst.<br>
     {{bug("275173")}}: Op Windows en Mac OS X, <code>no-drop</code> is hetzelfde als <code>not-allowed</code>.</td>
   </tr>
   <tr style="cursor: not-allowed;">
    <td><code>not-allowed</code></td>
    <td><img alt="not-allowed.gif" src="/@api/deki/files/3446/=not-allowed.gif" style="height: 26px; width: 26px;"></td>
    <td>Iets kan niet worden gedaan.</td>
   </tr>
   <tr style="cursor: all-scroll;">
    <td rowspan="15" style="cursor: auto;">Resize &amp; scrolling</td>
    <td><code>all-scroll</code></td>
    <td><img alt="all-scroll.gif" src="/@api/deki/files/3433/=all-scroll.gif" style="height: 26px; width: 26px;"></td>
    <td>Iets kan gescrold worden in elke richting (pannend).<br>
     {{bug("275174")}}: Op Windows, <code>all-scroll</code> is hetzelfde als <code>move</code>.</td>
   </tr>
   <tr style="cursor: col-resize;">
    <td><code>col-resize</code></td>
    <td><img alt="col-resize.gif" src="/@api/deki/files/3435/=col-resize.gif" style="height: 26px; width: 26px;"></td>
    <td>De item/kolom groote kan verticaal worden aangepast. Vaak weergegeven als pijlen die links en rechts wijzen met een verticale balk tussen beide.</td>
   </tr>
   <tr style="cursor: row-resize;">
    <td><code>row-resize</code></td>
    <td><img alt="row-resize.gif" src="/@api/deki/files/3451/=row-resize.gif" style="height: 26px; width: 26px;"></td>
    <td>De item/kolom groote kan horizontaal worden aangepast. Vaak weergegeven als pijlen die boven en onder wijzen met een horizontale balk tussen beide.</td>
   </tr>
   <tr style="cursor: n-resize;">
    <td><code>n-resize</code></td>
    <td><img alt="Example of a resize towards the top cursor" src="/files/4083/n-resize.gif" style="border-style: solid; border-width: 0px; height: 26px; width: 26px;"></td>
    <td rowspan="8" style="cursor: auto;">
     <p>Een rand kan bewogen worden. Bijvoorbeeld de  <code>se-resize</code> cursor wordt gebruikt waneer een beweging start van de <em>zuid-oost</em> hoek van een box.</p>

     <p>In sommige omgevingen wordt een gelijk bi-directioneel rezise cursor weergegeven.Bijvoorbeeld, <code>n-resize</code> en<code>s-resize</code> zijn hetzelfde als <code>ns-resize</code>.</p>
    </td>
   </tr>
   <tr style="cursor: e-resize;">
    <td><code>e-resize</code></td>
    <td><img alt="Example of a resize towards the right cursor" src="/files/4085/e-resize.gif" style="height: 26px; width: 26px;"></td>
   </tr>
   <tr style="cursor: s-resize;">
    <td><code>s-resize</code></td>
    <td><img alt="Example of a resize towards the bottom cursor " src="/files/4087/s-resize.gif" style="height: 26px; width: 26px;"></td>
   </tr>
   <tr style="cursor: w-resize;">
    <td><code>w-resize</code></td>
    <td><img alt="Example of a resize towards the left cursor" src="/files/4089/w-resize.gif" style="height: 26px; width: 26px;"></td>
   </tr>
   <tr style="cursor: ne-resize;">
    <td><code>ne-resize</code></td>
    <td><img alt="Example of a resize towards the top-right corner cursor" src="/files/4091/ne-resize.gif" style="height: 26px; width: 26px;"></td>
   </tr>
   <tr style="cursor: nw-resize;">
    <td><code>nw-resize</code></td>
    <td><img alt="Example of a resize towards the top-left corner cursor" src="/files/4093/nw-resize.gif" style="height: 26px; width: 26px;"></td>
   </tr>
   <tr style="cursor: se-resize;">
    <td><code>se-resize</code></td>
    <td><img alt="Example of a resize towards the bottom-right corner cursor" src="/files/4097/se-resize.gif" style="height: 26px; width: 26px;"></td>
   </tr>
   <tr style="cursor: sw-resize;">
    <td><code>sw-resize</code></td>
    <td><img alt="Example of a resize towards the bottom-left corner cursor" src="/files/4095/sw-resize.gif" style="height: 26px; width: 26px;"></td>
   </tr>
   <tr style="cursor: ew-resize;">
    <td><code>ew-resize</code></td>
    <td><img alt="3-resize.gif" class="default" src="/files/3806/3-resize.gif" style="height: 26px; width: 26px;"></td>
    <td rowspan="4" style="cursor: auto;">Bi-directioneel resize cursor.</td>
   </tr>
   <tr style="cursor: ns-resize;">
    <td><code>ns-resize</code></td>
    <td><img alt="6-resize.gif" class="default" src="/files/3808/6-resize.gif" style="height: 26px; width: 26px;"></td>
   </tr>
   <tr style="cursor: nesw-resize;">
    <td><code>nesw-resize</code></td>
    <td><img alt="1-resize.gif" class="default" src="/files/3805/1-resize.gif"></td>
   </tr>
   <tr style="cursor: nwse-resize;">
    <td><code>nwse-resize</code></td>
    <td><img alt="4-resize.gif" class="default" src="/files/3807/4-resize.gif" style="height: 26px; width: 26px;"></td>
   </tr>
   <tr style="cursor: -webkit-zoom-in; cursor: zoom-in;">
    <td rowspan="2">Zoom</td>
    <td><code>zoom-in</code></td>
    <td><img alt="zoom-in.gif" class="default" src="/@api/deki/files/3459/=zoom-in.gif"></td>
    <td rowspan="2" style="cursor: auto;">
     <p>Iets kan worden in- of uitvergroot.</p>
    </td>
   </tr>
   <tr style="cursor: -webkit-zoom-out; cursor: zoom-out;">
    <td><code>zoom-out</code></td>
    <td><img alt="zoom-out.gif" class="default" src="/@api/deki/files/3460/=zoom-out.gif"></td>
   </tr>
   <tr id="grab" style="cursor: -moz-grab; cursor: -webkit-grab; cursor: grab;">
    <td rowspan="2">Grab</td>
    <td><code>grab</code></td>
    <td><img alt="grab.gif" class="default" src="/@api/deki/files/3440/=grab.gif"></td>
    <td rowspan="2" style="cursor: auto;">
     <p>Iets kan worden vastgepakt. (Gesleept worden om te verplaatsen)</p>
    </td>
   </tr>
   <tr style="cursor: -moz-grabbing; cursor: -webkit-grabbing; cursor: grabbing;">
    <td><code>grabbing</code></td>
    <td><img alt="grabbing.gif" class="default" src="/@api/deki/files/3441/=grabbing.gif"></td>
   </tr>
  </tbody>
 </table>
 </dd>
</dl>

<h3 id="Formal_syntax">Formal syntax</h3>

<pre class="syntaxbox">{{csssyntax}}
</pre>

<h2 id="Usage_notes">Usage notes</h2>

<p>Hoewel de specificaties geen grootte limitaties defineerd voor <code>cursor</code>, 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.</p>

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

<h2 id="Examples">Examples</h2>

<pre class="brush:css">.foo {
  cursor: crosshair;
}

.bar {
  cursor: zoom-in;
}

/* A fallback keyword value is required when using a URL */
.baz {
  cursor: url("hyper.cur"), auto;
}
</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Basic UI', '#cursor', 'cursor')}}</td>
   <td>{{Spec2('CSS3 Basic UI')}}</td>
   <td>Toevoeging van verschillend sleutelwoorden and positionerings syntaxt voor <code>url()</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'ui.html#cursor-props', 'cursor')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Initiële definitie.</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Browser_compatibility">Browser compatibility</h2>





<p>{{Compat("css.properties.cursor")}}</p>



<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/CSS/Using_URL_values_for_the_cursor_property" title="Using URL values for the cursor property">Using URL values for the cursor property</a></li>
 <li>{{cssxref("pointer-events")}}</li>
 <li><a href="http://msdn.microsoft.com/en-us/library/aa358795.aspx">Cursor Property (MSDN)</a></li>
</ul>