So ändern Sie Den Cursor Beim Hover

Inhaltsverzeichnis:

So ändern Sie Den Cursor Beim Hover
So ändern Sie Den Cursor Beim Hover

Video: So ändern Sie Den Cursor Beim Hover

Video: So ändern Sie Den Cursor Beim Hover
Video: Change Cursor on Hover using CSS u0026 Vanilla Javascript | Mouse Cursor Effects 2024, April
Anonim

Einige Elemente von Webseiten ändern beim Bewegen mit der Maus ihr Aussehen - dies ist ihnen standardmäßig durch die Einstellungen der HTML-Sprache (HyperText Markup Language - "Hypertext Markup Language") vorgegeben. Diese Sprache verfügt über Tools, mit denen Sie dieselben Einstellungen für andere Seitenelemente ändern können. Dazu können Sie bei Bedarf sowohl CSS (Cascading Style Sheets) als auch die clientseitige Skriptsprache JavaScript verwenden.

So ändern Sie den Cursor beim Hover
So ändern Sie den Cursor beim Hover

Anweisungen

Schritt 1

Verwenden Sie das style-Attribut, um die Cursorvariable im Tag des für Sie interessanten Webseitenobjekts setzen zu können. Der HTML-Code eines Eingabetextfeldes, das den Browser des Besuchers anweist, das Aussehen des Cursors ähnlich wie beim Bewegen der Maus über einen Link zu ändern, kann beispielsweise so geschrieben werden:

Schritt 2

Wählen Sie die gewünschte Cursordarstellung aus der Liste der gültigen Werte für den Cursorparameter aus. In dem im vorherigen Schritt gezeigten Beispiel wird der Wert von pointer verwendet - der Wert von hand hat genau den gleichen Effekt. Zusätzlich zu diesen beiden Werten stehen folgende Optionen für die Darstellung des Cursors zur Verfügung: Fadenkreuz, e-resize, help, move, n-resize, ne-resize, nw-resize, progress, s-resize, se-resize, sw-Größe ändern, Text, w-Größe ändern, warten. Um den Cursor im obigen Codebeispiel beispielsweise wie einen Doppelpfeil von links oben nach rechts unten aussehen zu lassen, verwenden Sie nw-resize anstelle von Zeiger:

Die Buchstaben vor dem Größenänderungswert helfen dabei zu bestimmen, in welche Richtung der Pfeil durch diesen Wert gerichtet ist - sie entsprechen wie bei einem Kompass den Bezeichnungen der Himmelsrichtungen. Beispielsweise steht nw für Nord-West (Nordwest), s für Süd (Süd) usw.

Schritt 3

Verwenden Sie die Datei-URL anstelle der vordefinierten Werte, wenn Sie Ihr eigenes Cursorbild im nativen cur-Format hochgeladen haben. Verwenden Sie dazu die folgende Syntax:

<Eingabestil = "Cursor: URL (https://someSite.ru/someCursor.cur) "/>

Befindet sich die Datei im selben Ordner wie die Seite oder in einem Unterordner, können Sie statt einer absoluten Adresse auch eine relative angeben.

Schritt 4

Verwenden Sie das onmouseover-Attribut, wenn Sie das Aussehen des Cursors mit JavaScript ändern möchten. Beispielsweise:

Dieser Code funktioniert genau wie das Beispiel in Schritt zwei.

Empfohlen: