Cursor einbinden (Normal + Hover)

Ich möchte euch heute erklären, wie ihr euren Cursor (Anzeigepfeil) ändert. Und auch den, wenn ihr über Links fahrt. Live seht ihr das auf meinem Blog. Wenn ihr da über einen Link, ein Bild mit der Maus fahrt, ändert sich der Cursor. Das ist ganz einfach!


Für alle drei Varianten brauchen wir diesen Schritt:

Ihr sucht euch einen Cursor auf, beispielsweise auf Seiten wie 'cursor-4U'.

Nun brauchen wir den Cursorlink! Ihr geht auf 'Option 2' und kopiert den Code irgendwo hin. Ich habe diesen:

/* Start http://www.cursors-4u.com */ body, a:hover {cursor: url(http://cur.cursors-4u.net/others/oth-6/oth589.cur), progress !important;} /* End http://www.cursors-4u.com */

Den rot markierten Teil brauchen wir.

I. Cursor ändern (ohne Hover)

Bei 'Layout' in der Bloggeroberfäche HTML/Javascript einfügen, an eine unauffällige Stelle. Dann einfach eure Cursor-URL an die markierte Stelle setzen. Fertig!

<style> body, a, a:hover { cursor:url('CURSOR-URL'), auto; }</style>

II. Cursor mit Hover

1. Normaler Cursor

Sucht nach body { oder body, .body-fauxcolumn-outer { in eurem HTML-Teil (Vorlage -> HTML bearbeiten -> Fortfahren)

Dort fügt ihr

cursor: url(CURSOR-URL), auto; 

ein.

Jetzt sollte der Cursor so sein, wie ihr es wolltet. Aber wenn ihr jetzt über einen Link fahrt, kommt wieder die ursprüngliche Maus. Aber das wollen wir ja nicht, oder? ;)

2. Hover Cursor

Deswegen geht's hier jetzt weiter. Sucht euch den nächsten Cursor aus und holt euch wieder die Cursor-URL.

In eurem HTML-Teil sucht ihr nun nach a:hover, was aber eigentlich ganz in der Nähe von body { sein müsste

Jetzt haben wir diesen Code:

cursor: url(CURSOR-URL), progress; 

 und den fügt ihr darunter ein.

gar nicht so schwer, was?

Ich wünsche euch viel Spaß mit dem Cursor! :)