Wie man Cursorzeiger ändert und CSS anwendet, wenn jemand meine Website besucht

Ich bin ein Website-Entwickler und ich frage mich, ob es möglich ist, einige css auf den Mauszeiger anwenden. Ich weiß, wir können cursor:pointer; verwenden und es wird den Standardpfeil in eine klickende Hand (die allgemein die Verbindungen zeigt) drehen.Wie man Cursorzeiger ändert und CSS anwendet, wenn jemand meine Website besucht

Aber was ich will eigentlich ist wie zu tun ist, wenn jemand besucht meine Website dann seinen Mauszeiger verwandelt sich in RED Farbe oder einige Schatten zu umgeben scheinen es oder so ähnlich. Ich bin mir nicht sicher ob es möglich ist oder nicht und es kann eine sehr dumme Frage sein, also tut mir im Voraus dafür leid. Und wenn es möglich ist, dann möchte ich wissen, wie? Meine Frage ist so einfach und jede Hilfe wird wirklich geschätzt.

* Hinweis: Wenn es mit Javascript oder jquery möglich ist, dann stört es mich nicht, diese auch zu verwenden.

Dank

Quelle

2017-04-21 Mahesh Suthar

siehe hier https://css-tricks.com/almanac/properties/c/cursor/ – HisPowerLevelIsOver9000

Dieser Artikel war wirklich hilfreich und vielen Dank dafür. Aber es ist nicht möglich, die Farbe zu ändern und alle Arten von CSS zu verwenden, wie zum Beispiel die Rahmengröße usw. Es gab nur einige vordefinierte Designs des Cursors, aber ich möchte etwas kreativer sein. Ich hoffe du verstehst mein Problem. –

Ich habe festgestellt, dass jemand es mit Javascript tut - aber das sieht ziemlich umständlich IMO. http://codepen.io/tamm/pen/LIFam – HisPowerLevelIsOver9000

Nein, können Sie nicht Verhalten oder Stil von nativen Cursor ändern, sondern auch für Ihre Feature haben Sie mehrere Optionen:

Erstens: Es gibt nicht nur pointer, sondern eine Menge anderer Werte für das cursor CSS-Attribut. Sie können sich diese ansehen here

Zweitens: Sie können ein Bild bereitstellen, das als Cursor verwendet werden soll. Sie haben sich bewusst Kompatibilität Browser in diesem Fall sein, aber es ist wahrscheinlich der Weg für Sie zu gehen:

cursor: url('path-to-image.png'), auto;

Eine weitere Option cursor: none und verwenden eine Art von DOM-Element verwenden könnte, die folgt, die Mausposition des Benutzers stattdessen. Das ist wahrscheinlich nicht die Art und Weise, wie Sie es tun möchten, und ich würde es nicht empfehlen (weil es sich einfach hacky anfühlt und negative Auswirkungen auf die Leistung hat), aber es ist definitiv möglich.

Hier ist ein Beispiel für diese Option (von css-tricks.com genommen): http://codepen.io/tamm/pen/LIFam

Quelle

2017-04-21 15:39:28 lexith

Ich wusste über einige der Attribute zum Cursor: ; Aber ich pointer für ein Beispiel. Aber es war hilfreich für mich, etwas Neues zu lernen, das ist DOM-Element und ich werde es definitiv für Lernzwecke verwenden. Und ich habe ein paar Zweifel daran, und das ist "Wenn ich ein Bild für den Cursor verwende, dann denke ich, dass es einige Sekundenbruchteile braucht, um zu erscheinen und möglicherweise mehr mit langsamer Verbindung. Ich weiß, dass das Bild sehr klein ist, aber es dauert etwas Platz. " –

Nun, das hängt von Ihrem Fall ab, aber ich würde nicht so weit gehen, zu sagen, dass die Verwendung eines Bildes als Cursor einen wesentlichen Einfluss auf die Ladegeschwindigkeit Ihrer Web-App hat. Etwas, an das Sie denken sollten, ist die Benutzererfahrung. Aus diesem Grund sehen Sie nicht viele Apps mit benutzerdefinierten Cursorn. – lexith

ja, es ist möglich, dass Sie wie folgt tun:

body { 
 
    cursor:url('/img/yourimage.png'), auto; 
 
}

Quelle

2017-04-21 15:35:22

Ist dies die einzige Möglichkeit, den Cursor manuell zu gestalten? Angenommen, ich möchte die Farbe des Rands des Cursors ändern, dann muss ich auch ein Bild entwerfen und es dann verwenden. –

Ich kann keine andere Lösung finden .... –

hmmmm, ok. Danke Mann für Ihre Bemühungen, eine Lösung für mein Problem zu finden. –

Hier ist eine gegabelt Version des codepen ich Ihnen

http://codepen.io/hoonin_hooligan/pen/wdGVeG

Sie zu

verknüpft würden Natürlich müssen Sie die Dinge über konventionelles CSS ändern, um Ihren "Cursor" zu machen, aber das würde verhindern, dass Sie den Cursor als Bild erstellen müssen, und Sie könnten Animationen usw. haben.

#follower 
position absolute 
top 50% 
left 50% 
#circle1 
    position absolute 
    border-top 10px solid transparent 
    border-bottom 10px solid transparent 
    border-left 15px solid red 
    height 0em 
    width 0em 
    margin-top 0em 
    margin-left 0em

Quelle

2017-04-21 15:53:37 HisPowerLevelIsOver9000

Wie man Cursorzeiger ändert und CSS anwendet, wenn jemand meine Website besucht

Antwort

Verwandte Themen