legen Sie die Farbe der Maus-cursor mit CSS

Wie kann ich die Farbe zuweisen, um den Mauszeiger in eine web-Seite?

Kann mir jemand empfehlen einen Weg, es zu tun mit einer der Technologien wie z.B. HTML, CSS, JavaScript?

Ihr Kommentar ist weniger konstruktiv als die Frage

InformationsquelleAutor Rajesh Paul | 2013-09-13

  1. 17

    Verwenden Sie ein Bild zusammen mit CSS cursor Eigentum, ich sehe keine Notwendigkeit von JavaScript heere...

    Demo

    div {
   cursor: url(YOUR_IMAGE_URL), auto;
}

    So kommentiert, ich habe auto die nichts aber default cursor nur sofern Sie Ihr Bild nicht laden, genau wie wir, erklären mehrere Schriftfamilien.

    Wow.. Cool.. +1.. Aber funktioniert es für den ie 8?
    Ich habe nie Dinge bauen für IE, da es nervt immer alles, obwohl polyfills sind verfügbar 🙂
    Schön 1................
    Sie können nicht ändern die system cursor, aber Sie kann Farben ändern eines benutzerdefinierten Cursors, indem Sie ein Bild für ihn mit Leinwand.
    Danke für den alternativen Ansatz. Zumindest habe ich eine Lösung.

    InformationsquelleAutor Mr. Alien

  2. 17

    Nur die Möglichkeit, um dynamisch hinzufügen eines cursor, ohne Bild, aber erzeugen Sie auf dem client mit JavaScript und Canvas.

    Demo enthält eine einfache cursor gezogen, die mit Formen, dies könnte aber genauso leicht Bilder, Videos und so weiter (alles, was ein canvas-Unterstützung).

    Fiddle (aktualisiert 5/2016 für Firefox - verschoben von Dokument-element).

    Hinweis: FireFox hat das problem, wenn der cursor verändert sich, so Häufig wie in dieser demo - aktualisiert werden, um änderungen nur einmal pro Sekunde. FF löscht den cursor bei der Einstellung eines neuen Bildes, aber seit dem neuen image erst entschlüsselt werden muss es zeigt die standardmäßig in der Zwischenzeit. Chrome wartet, bis das Bild dekodiert, bevor Sie Umschalten.

    In jedem Fall ist es lediglich zu zeigen, dass es getan werden kann, mit Leinwand - test-demo mit Chrome und ändern Sie nicht die Maus so oft :-).

    Die animation Schleife, die hier ändert sich die Farbe nach dem Zufallsprinzip, um zu demonstrieren:

    function loop() {

    var color = 'rgb(' + ((255 * Math.random())|0) + ','
                       + ((255 * Math.random())|0) + ','
                       + ((255 * Math.random())|0) + ')';
    makeCursor(color);

    setTimeout(loop, 1000);
}

    Den cursor maker:

    function makeCursor(color) {

    //create off-screen canvas
    var cursor = document.createElement('canvas'),
        ctx = cursor.getContext('2d');

    cursor.width = 16;
    cursor.height = 16;

    //draw some shape for sake of demo
    ctx.strokeStyle = color;

    ctx.lineWidth = 2;
    ctx.moveTo(2, 10);
    ctx.lineTo(2, 2);
    ctx.lineTo(10, 2);
    ctx.moveTo(2, 2);
    ctx.lineTo(30, 30)    
    ctx.stroke();

    //set image as cursor (modern browsers can take PNGs as cursor).
    element.style.cursor = 'url(' + cursor.toDataURL() + '), auto';
}
    +1 für deine Mühen 🙂 und ein disco-cursor.. lol, btw-Standard-cursor showsup beim bewegen der cursor, bin auf ff 22
    danke. ja, der FF ist ein wenig instabil, wahrscheinlich wegen der animation Schleife so eng. Aber für den normalen Gebrauch denke ich, dass dies nicht ein problem sein, es sei denn, die Farbe zu ändern die ganze Zeit, wie hier (Aktualisierung der css-Regel)
    jetzt geht das Recht gut, kann nicht +1 zweimal 😉 aber +1 wieder.. es behebt die Standard-cursor-Problem auch... obwohl die Unterstützung für das canvas ist nicht beeindruckend wie der jetzt, aber das wird es Wert sein, zu verwenden, vor...
    canvas-Unterstützung ist eigentlich Recht gut (ich arbeite meist mit canvas heute) (caniuse.com/#feat=canvas). Aber IE ist der ähm..speziellen Fall, für die älteren Versionen sowieso.
    Wir können sagen, es ist ein border-line-Fall, weil alle neueren Versionen der Browser gestartet haben, unterstützen die Leinwand, und wer kümmert sich um den IE, es ist wie ein Heck auf dem Kuchen

    InformationsquelleAutor

  3. 1

    Sollten Sie erstellen/suchen Sie eine benutzerdefinierte cursor. Verwenden Sie dann die cursor CSS-Eigenschaft auch auf Ihrer website.

    Gibt es ein tutorial für diese hier: http://www.axialis.com/tutorials/use-cursors-to-customize-websites.htm

    InformationsquelleAutor maikelsabido

  4. 0

    Habe ich meine eigenen cursor bis heute. Blaue version des standard-Pfeil. PNG-Datei mit alpha-transparenten Schatten. Ich habe es geliebt. Aber jetzt habe ich ein Upgrade auf 4K, und die PNG-logisch nicht Maßstab, so erscheint es winzig. Jede Lösung für dieses? Für jetzt benutze ich das Fadenkreuz, 'cos ich kann nicht ertragen, dass hand-cursor.

    Hatte diese: cursor: url(img/pointer_blue.png),auto;

    Jetzt ist es: "cursor: crosshair;

    InformationsquelleAutor Ole Sørensen

Schreibe einen Kommentar