Il y a en css, pas mal de choses sympa que l’on peut faire. L’une de ces choses c’est de changer le curseur css, ce qui en terme moins savant veut dire, remplacer l’apparence de la souris lorsqu’elle passe sur l’un des éléments de vos pages web…

On peut par exemple remplacer le curseur par une main pour un clic, par une bulle d’aide pour un paragraphe ou une phrase, mettre un panneau interdit sur certains éléments, un zoom avant ou arrière, et il y a encore plein d’autres façons de modifier le curseur css.

 

Voici les curseurs css principaux (basiques), pointez votre souris dessus pour voir à quoi ils ressemblent une fois utilisé :

alias

all-scroll

auto

cell

context-menu

col-resize

copy

crosshair

default

e-resize

ew-resize

grab

grabbing

help

move

n-resize

ne-resize

nesw-resize

ns-resize

nw-resize

nwse-resize

no-drop

none

not-allowed

pointer

progress

row-resize

s-resize

se-resize

sw-resize

text

url

w-resize

wait

zoom-in

zoom-out

Voici les code css utilisés dans cet article :

.alias {cursor: alias;}
.all-scroll {cursor: all-scroll;}
.auto {cursor: auto;}
.cell {cursor: cell;}
.context-menu {cursor: context-menu;}
.col-resize {cursor: col-resize;}
.copy {cursor: copy;}<br />
.crosshair {cursor: crosshair;}
.default {cursor: default;}
.e-resize {cursor: e-resize;}
.ew-resize {cursor: ew-resize;}
.grab {cursor: grab;}
.grabbing {cursor: grabbing;}
.help {cursor: help;}
.move {cursor: move;}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nesw-resize {cursor: nesw-resize;}
.ns-resize {cursor: ns-resize;}
.nw-resize {cursor: nw-resize;}
.nwse-resize {cursor: nwse-resize;}
.no-drop {cursor: no-drop;}
.none {cursor: none;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
.progress {cursor: progress;}
.row-resize {cursor: row-resize;}
.s-resize {cursor: s-resize;}
.se-resize {cursor: se-resize;}
.sw-resize {cursor: sw-resize;}
.text {cursor: text;}
.url {cursor: url(myBall.cur),auto;}
.w-resize {cursor: w-resize;}
.wait {cursor: wait;}
.zoom-in {cursor: zoom-in;}
.zoom-out {cursor: zoom-out;}

Que j’ai associé à la structure html suivante :

<p class="alias">alias</p>
<p class="all-scroll">all-scroll</p>
<p class="auto">auto</p>
<p class="cell">cell</p>
<p class="context-menu">context-menu</p>
<p class="col-resize">col-resize</p>
<p class="copy">copy</p>
<p class="crosshair">crosshair</p>
<p class="default">default</p>
<p class="e-resize">e-resize</p>
<p class="ew-resize">ew-resize</p>
<p class="grab">grab</p>
<p class="grabbing">grabbing</p>
<p class="help">help</p>
<p class="move">move</p>
<p class="n-resize">n-resize</p>
<p class="ne-resize">ne-resize</p>
<p class="nesw-resize">nesw-resize</p>
<p class="ns-resize">ns-resize</p>
<p class="nw-resize">nw-resize</p>
<p class="nwse-resize">nwse-resize</p>
<p class="no-drop">no-drop</p>
<p class="none">none</p>
<p class="not-allowed">not-allowed</p>
<p class="pointer">pointer</p>
<p class="progress">progress</p>
<p class="row-resize">row-resize</p>
<p class="s-resize">s-resize</p>
<p class="se-resize">se-resize</p>
<p class="sw-resize">sw-resize</p>
<p class="text">text</p>
<p class="url">url</p>
<p class="w-resize">w-resize</p>
<p class="wait">wait</p>
<p class="zoom-in">zoom-in</p>
<p class="zoom-out">zoom-out</p>
[/hmtl]

Ce qui veut dire par exemple que si vous voulez un curseur en forme de croix sur un paragraphe, vous pouvez faire comme ça au niveau du html de votre page (passez votre souris sur le petit bout de texte à propos de César pour la démonstration) :

<p class="cesarplus">Gaius Julius Caesar était un grand général et politicien romain.</p>

Gaius Julius Caesar était un grand général et politicien romain.

Et mettre ça dans votre css :

.cesarplus {
cursor: crosshair;
}

Comme cette page devient un peu compliqué à gérer avec tous ces codes, je vous propose de passer sur un autre article pour apprendre à créer des curseurs css personnalisés sur vos liens, ou même des curseurs css avec vos propres icônes.

Faites connaître ce cours sur vos réseaux sociaux favoris :