J'ai fait une démo sur Jsfiddle Mon JavaScript est comme suit et le CSS est comme suit mais pourquoi le curseur ne devient pas une main fermée sur Souris avec ce code JQuery?
Merci beaucoup!
Toute aide serait appréciée!
Mise à jour Cette version fonctionne dans FF mais pas chrome ..
7 Réponses :
Ceci fonctionne (dans FF au moins): http://jsfiddle.net/uz377/21/
J'ai changé le Live pour lier, Dunno pourquoi, mais vivre n'a pas fonctionné. En outre, j'ai enveloppé ceci dans la fonction jQuery.
J'ai déplacé ces deux événements.
http://jsfiddle.net/genesis/uz377/23/
Cependant, il semble que cela ne fonctionne pas en chrome, mais cela fonctionne dans Firefox.
La syntaxe que vous utilisez n'a été introduite avant 1.4.3 ( documenté ici ), votre jsfiddle utilise 1.4.2. Votre jsfiddle ajoute également une classe à Mais je ne suis pas sûr de savoir comment le curseur CSS réagit à MouseDown et à MouseUp - j'ai un sentiment qui peut être limitant dans certains navigateurs, un peu de violon que je travaillais sur MouseUp, mais pas MouseDown - qui semble étrange . ce , plutôt que $ (this) .
Je viens de trouver plus étrange qu'une simple souris ou une souris ajoutée ajout de la classe peut être si buggy ..
a commencé à travailler dans Safari après avoir ajouté Event.PreventDefault () http://jsfiddle.net/uz377/49/
$(document).ready(function() {
$(".surface").mouseup(function(){
$(".surface").css( "cursor","crosshair");
}).mousedown(function(){
$(".surface").css( "cursor","wait");
});
});
Make in css .surface{cursor:crosshair;}
If you want to have mouse down/up just change the cursors to hand up/down icon.
Hope this helps.
Vous pouvez obtenir le curseur de la souris saisir avec CSS uniquement:
/* Standard cursors */
.element { cursor: grab; }
.element:active { cursor: grabbing; }
/* Custom cursors */
.element { cursor: url('open-hand.png'), auto; }
.element:active { cursor: url('closed-hand.png'), auto; }
Démo de cette solution jsfiddle.net/tuq5mple
La solution «curseurs standard» a parfaitement fonctionné!
nécessaire pour le faire dans un plugin de curseur JQuery que je travaille. Ce que j'ai fait était de définir les curseurs en CSS, puis ajoutez / supprimez-les sur des événements tactiles / souris avec jQuery. P> CSS: P> $(".element").on("mousedown touchstart", function(e) {
$(this).addClass('grabbing')
})
$(".element").on("mouseup touchend", function(e) {
$(this).removeClass('grabbing')
})
Cela n'aurait pas fonctionné quand j'avais posé la question, je suis content que cela fonctionne maintenant!
J'ai mis à jour la question et aussi la démo montre que le JQuery JavaScript ne fonctionne pas.
Certains navigateurs supportent maintenant:
Curseur: -WebKit-Grabbing; curseur: -MOZ-saisir; .