wake-up-neo.net

Cursor in Chrome (und IE) ausblenden

Ich habe das folgende CSS, das den Mauszeiger für alles auf der Webseite versteckt. Es funktioniert perfekt in Firefox, aber in IE und Chrome funktioniert es nicht.

html {
    cursor: none;
}

In Chrome sehe ich immer den Mauszeiger. Im IE sehe ich jedoch, welcher Cursor zuletzt "aktiv" war, als er auf den Bildschirm kam. Vermutlich wird die letzte Auswahl beibehalten, anstatt sie zu entfernen.

18
Chris

Diese Eigenschaft cursor:none; ist nicht Bestandteil des Standards

Siehe hier w3c cursor CSS properties .

Vielleicht möchten Sie es mit Javascript oder JQuery verstecken.

Schauen Sie sich auch leere Cursordateien an hier .

Und ein letzter Link zu einer Ajax-Lösung .

Chrome hat dieses Problem, seit es erstellt wurde. Es wurden Berichte an die Mitarbeiter von Chromium gesendet, und ich gehe davon aus, dass sie daran arbeiten.

Vertraue auch nicht, dass irgendetwas in IE funktionieren würde. Je. : P

22
Kyle

Ich hatte in diesen Tagen das gleiche Problem und fand eine gute Lösung, um den Zeiger in Google Chrome zu verbergen.

Dies ist die W3C-Definition der url-Eigenschaft:

Ein von URLs zu benutzerdefinierten Cursorn getrenntes Komma. Hinweis: Geben Sie am Ende der Liste immer einen generischen Cursor an, falls keiner der URL-definierten Cursor verwendet werden kann

Sie können also eine URL für nicht vollständig transparent image definieren, gefolgt vom Standardzeiger:

cursor: url(img/almost_transparent.png), default;

Wenn Sie ein vollständig transparentes PNG auswählen, zeigt Chrome stattdessen ein schwarzes Rechteck an. Wenn Sie jedoch ein PNG auswählen, das mindestens 1 Pixel nicht transparent ist, funktioniert dies und niemand bemerkt den Zeiger.

11
alexmeia

Es ist mühsam, etwas zu finden, das über alle Browser hinweg funktioniert.

Der folgende Code funktioniert unter Chrome, IE und Firefox. IE mag .cur-Dateien, Chrome mag das eingebettete png und einige Browser respektieren das none :)

div {
    cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjbQg61aAAAADUlEQVQYV2P4//8/IwAI/QL/+TZZdwAAAABJRU5ErkJggg=='),
    url(images/blank.cur),
    none;
}
7

Der beste Weg, um damit umzugehen, ist jetzt die Zeigersperre api.

https://developer.mozilla.org/en-US/docs/WebAPI/Pointer_Lock

Der Mauszeiger wird ausgeblendet, Sie haben jedoch auch Zugriff auf die Daten zur Mausbewegung.

0
RandallB