Cursor wijzigen met CSS - Soorten muiscursors en CSS-instellingen

Cursor wijzigen met CSS
= Soorten muiscursors en CSS-instellingen =

Op een webpagina kan de vorm van de muiscursor of de aanwijzer worden ingesteld met de CSS-eigenschap "cursor".
Deze gids onderzoekt CSS-waarden voor verschillende cursorvormen en hoe je ze kunt configureren.
Je kunt op de eigenschappen klikken om ze te kopiëren. Deze pagina bevat de eigenschap "cursor:copy" voor kopieerbare elementen.
Voor elke eigenschap worden voorbeeldafbeeldingen weergegeven. De vorm kan echter verschillen, afhankelijk van je besturingssysteem en browser.
Door over de secties "On Mouse" te bewegen, kun je de cursor zien zoals deze in jouw omgeving verschijnt.

《Hoe in te stellen》

Als je dit op meerdere secties op een pagina wilt toepassen, is het gebruikelijk om het volgende in de <head> sectie of een extern CSS-bestand te schrijven.
".cursorstyle" is een aangepaste klassenaam.

<style>
.cursorstyle {
cursor : pointer;
}
</style> Kopiëren
Voorbeeld van het toepassen van de bovenstaande CSS met behulp van de "class" attribuut.
<span class="cursorstyle">Tekst</span> Kopiëren

<div class="cursorstyle">Tekst</div> Kopiëren

<a class="cursorstyle">Tekst</a> Kopiëren
Voorbeeld wanneer toegepast op een enkele sectie of enkele elementen.
Gebruik het "style" attribuut en schrijf de eigenschap direct.
<span style="cursor : pointer;">Tekst</span> Kopiëren

<div style="cursor : pointer;">Tekst</div> Kopiëren

《Cursor Types and CSS Values》

CSS Waarden [Klik om te kopiëren]	Voorbeeld in OS [Kan variëren afhankelijk van de browser]		Mouse-Over Vormvoorbeeld	Beschrijving
CSS Waarden [Klik om te kopiëren]	Windows	Mac	Mouse-Over Vormvoorbeeld	Beschrijving
auto cursor: auto;			《Mouse-Over》	The browser automatically determines the cursor based on the context
default cursor: default;			《Mouse-Over》	Displays a standard arrow
none cursor: none			《Mouse-Over》	Does not display a cursor
context-menu cursor: context-menu			《Mouse-Over》	Allows the use of a context menu
help cursor: help			《Mouse-Over》	Help item
pointer cursor: pointer			《Mouse-Over》	When hovering over a link, etc.
progress cursor: progress			《Mouse-Over》	Processing a task. User interaction is possible
wait cursor: wait			《Mouse-Over》	Processing a task. User interaction is not possible
cell cursor: cell			《Mouse-Over》	Selectable table cell
crosshair cursor: crosshair			《Mouse-Over》	Cross cursor, often indicating selection on a bitmap
text cursor: text			《Mouse-Over》	Selectable text
vertical-text cursor: vertical-text			《Mouse-Over》	Selectable vertical text
alias cursor: alias			《Mouse-Over》	Can create an alias or shortcut
copy cursor: copy			《Mouse-Over》	Copyable
move cursor: move			《Mouse-Over》	Movable
no-drop cursor: no-drop			《Mouse-Over》	Cannot be dropped at that position
not-allowed cursor: not-allowed			《Mouse-Over》	The requested action cannot be performed
grab cursor: grab			《Mouse-Over》	Draggable, usually paired with grabbing
grabbing cursor: grabbing			《Mouse-Over》	During dragging, paired with grab
all-scroll cursor: all-scroll			《Mouse-Over》	Can scroll in any direction
col-resize cursor: col-resize			《Mouse-Over》	Resizable box with horizontal edge movement
row-resize cursor: row-resize			《Mouse-Over》	Resizable box with vertical edge movement
n-resize cursor: n-resize			《Mouse-Over》	Resizable box with edge movement towards the north (top)
w-resize cursor: w-resize			《Mouse-Over》	Resizable box with edge movement towards the west (left)
s-resize cursor: s-resize			《Mouse-Over》	Resizable box with edge movement towards the south (bottom)
e-resize cursor: e-resize			《Mouse-Over》	Resizable box with edge movement towards the east (right)
nw-resize cursor: nw-resize			《Mouse-Over》	Resizable box with edge movement towards the northwest (top-left)
ne-resize cursor: ne-resize			《Mouse-Over》	Resizable box with edge movement towards the northeast (top-right)
sw-resize cursor: sw-resize			《Mouse-Over》	Resizable box with edge movement towards the southwest (bottom-left)
se-resize cursor: se-resize			《Mouse-Over》	Resizable box with edge movement towards the southeast (bottom-right)
ew-resize cursor: ew-resize			《Mouse-Over》	Resizable box with bidirectional horizontal edge movement
ns-resize cursor: ns-resize			《Mouse-Over》	Resizable box with bidirectional vertical edge movement
nesw-resize cursor: nesw-resize			《Mouse-Over》	Resizable box with edge movement in northeast-southwest (top-right & bottom-left) directions
nwse-resize cursor: nwse-resize			《Mouse-Over》	Resizable box with edge movement in northwest-southeast (top-left & bottom-right) directions
zoom-in cursor: zoom-in			《Mouse-Over》	Can zoom in
zoom-out cursor: zoom-out			《Mouse-Over》	Can zoom out
URL	Any image can be set as a cursor. The image size is limited to 128 × 128px. The sample image size is 70 × 70px. 《Mouse-Over》 .cursorimg {cursor: url(image-path), auto;} Copy ".cursorimg" can be any name. <div {cursor: url(image-path), auto;}>Text</div> Copy 《Retina Display Support》 .cursorimg {cursor: -webkit-image-set(url(@1x-image) 1x, url(@2x-image) 2x), auto;} Copy

Cursor wijzigen met CSS= Soorten muiscursors en CSS-instellingen =

Cursor wijzigen met CSS
= Soorten muiscursors en CSS-instellingen =

おすすめサイト・関連サイト…