cursor: none marche pas toujours ?

Une Bévue :

sur un canvas, j'ai mis :
#picker {
/*
cursor: crosshair;
*/
cursor: none;
float: left;
margin: 10px;
border: 0;
}


quelque fois, je n'ai pas de curseur (rarement), la plus part du temps j'ai
le curseur par défaut ?

cursor: none; fonctionne sur les versions actuelles de Firefox, Chrome,
Edge et IE. Lien pour tester:
http://www.w3schools.com/cssref/playit.asp?filename=playcss_cursor&preval=none
Attention, d'après moi, cursor:none, c'est simplement un curseur tout
transparent. Ça continue à "se comporter".
Et de plus il y a un risque qu'un curseur qui disparait soit ressenti
comme très inconfortable. Une pratique normale serait plutôt le curseur
standard dé-bindé de tout comportement. En revanche un curseur
au-dessus d'une image peut disparaitre au bout de x" (x petit)
d'immobilité, pour répapparaitre immédiatement quand la souris gigote.

comment remédier à ça ?

Un curseur en url(xxxx.cur) fonctionne sur tout navigateur décent,
facile d'en faire un tout transparent. Attention, un .png ne fonctionne
pas toujours.

--
Pierre Maurette

Le 05/05/2016 17:00, Pierre Maurette a écrit :

cursor: none; fonctionne sur les versions actuelles de Firefox, Chrome,
Edge et IE. Lien pour tester:
http://www.w3schools.com/cssref/playit.asp?filename=playcss_cursor&preval=none

Attention, d'après moi, cursor:none, c'est simplement un curseur tout
transparent. Ça continue à "se comporter".
Et de plus il y a un risque qu'un curseur qui disparait soit ressenti
comme très inconfortable.

Je suis d'accord. Le but de la manip est de remplacer la comportement du
curseur "normal" par un autre (une image positionnée par onmousemove).

En fait, le curseur se balade sur un canvas où est dessiné une color
wheel. Et au lieu de laisser faire le "onmousemove" tout seul, je ne
rafraichi la position de mon curseur que 50 fois par seconde. la
position de la souris seule étant enregistrée par ailleurs, et en
continu par onmousemove :

var cursorX, cursorY, cursorR, canvasRect;

document.onmousemove = function(e){
cursorX = e.pageX;
cursorY = e.pageY;
var dX = ((canvasRect.left + canvasRect.right) / 2 - cursorX);
var dY = ((canvasRect.top + canvasRect.bottom) / 2 - cursorY)
cursorR = Math.round(Math.sqrt(dX * dX + dY * dY) * 100) / 100;
}

par ce procédé le positionnement du curseur à un endroit donné de la
roue colorée est nettement plus facile et précise. Sinon ça tremblotte
et ça saute.

Une pratique normale serait plutôt le curseur
standard dé-bindé de tout comportement. En revanche un curseur au-dessus
d'une image peut disparaitre au bout de x" (x petit) d'immobilité, pour
répapparaitre immédiatement quand la souris gigote.

comment remédier à ça ?

Un curseur en url(xxxx.cur) fonctionne sur tout navigateur décent,
facile d'en faire un tout transparent. Attention, un .png ne fonctionne
pas toujours.

Ouais, j'ai vu ça un "url(xxxx.cur)" mais je ne sais pas comment en
faire un sur Mac OS X.