Eine einfache Möglichkeit, den Cursor von horizontal in vertikal zu ändern, ohne zusätzliche Werkzeuge zu verwenden

Mauszeiger "dies ist ein wesentlicher Bestandteil der Benutzeroberfläche, der uns hilft, mit dem Computer zu interagieren. Standardmäßig wird der Cursor horizontal dargestellt, aber was ist, wenn Sie ihn in vertikal ändern möchten? In diesem Artikel werden wir Ihnen sagen, wie Sie dies einfach und schnell tun können.

Ändern des Aussehens eines Cursors kann nützlich sein, wenn Sie ein einzigartiges Design für Ihre Website oder Anwendung erstellen möchten. Ein vertikaler Cursor kann einer Seite einen interessanten Akzent hinzufügen und sie stilvoller gestalten. Bevor Sie mit der Änderung beginnen, müssen Sie verstehen, dass dies mit CSS geschieht.

Um den Cursor von horizontal in vertikal zu ändern, müssen Sie die Eigenschaft verwenden cursor in CSS. Sie können den Wert verwenden, um einen vertikalen Cursor zu erstellen ew-resize. Dieser Cursor wird als vertikaler Doppelpfeil dargestellt und sieht auf Ihrer Seite gut aus.

Was ist ein Cursor?

Der Cursor spielt eine wichtige Rolle bei der visuellen Navigation und der Interaktion mit Computerprogrammen und Schnittstellen. Es hilft dem Benutzer, die aktuelle Position auf dem Bildschirm zu bestimmen, Objekte auszuwählen, sie zu verschieben, Text einzugeben und andere Aktionen auszuführen.

Der Cursor kann verschiedene Formen und Stile haben, die entsprechend den Anforderungen des Benutzers oder der Anwendung geändert werden können. Sie können auch mit dem Cursor auf verschiedene Elemente der Benutzeroberfläche zeigen, aktive Bereiche anzeigen und den aktuellen Status des Systems oder Programms signalisieren.

Sorten von Cursors

Webbrowser bieten eine Vielzahl von Cursor-Optionen, um verschiedene Aktionen anzuzeigen, wenn Sie auf Elemente einer Webseite zeigen. Mit der CSS-Eigenschaft cursor können Sie nicht nur einen normalen Zeiger (Pfeil) festlegen, sondern auch andere Cursorformen.

Zu den am häufigsten verwendeten Cursorvarianten gehören folgende:

• auto - Der Browser ermittelt anhand des aktuellen Kontexts selbstständig den geeigneten Cursor;
• default - Ein normaler Zeiger, der standardmäßig verwendet wird;
• pointer - Ein Zeiger mit erhobenem Zeigefinger, der anzeigt, dass ein Klick möglich ist;
• crosshair - Ein Fadenkreuz, das anzeigt, dass ein bestimmter Bereich hervorgehoben werden kann;
• text - Ein vertikaler Strich, der anzeigt, dass Text eingegeben werden kann;
• move - Ein Pfeilcursor zeigt an, dass ein Element verschoben werden kann;
• wait - Ein runder Cursor mit Stundenzeigern, der das Warten anzeigt;
• help - ein Fragezeichen in einem Kreis, das anzeigt, dass Hilfe möglich ist;
• not-allowed ist ein Verbotszeichen, das anzeigt, dass die Aktion nicht ausgeführt werden kann.

Jeder dieser Cursor gibt den Benutzern Informationen darüber, welche Aktion ausgeführt werden kann, wenn sie auf ein Element einer Webseite zeigen.

Ändern des Cursors

Webentwickler können die Ansicht des Cursors ändern, um eine intuitivere Benutzererfahrung zu erstellen und bestimmte Funktionen einer Webseite zu unterstreichen. Eine Möglichkeit, den Cursor zu ändern, besteht darin, ihn von einer horizontalen in eine vertikale Position zu verschieben.

Um den horizontalen Cursor in einen vertikalen Cursor zu ändern, muss der Entwickler die Eigenschaft verwenden cursor mit dem gewünschten Wert. In diesem Fall werden wir den Wert verwenden ew-resize, das eine vertikale Bemaßung bezeichnet:

cursor: ew-resize;

Nachdem Sie diese CSS-Eigenschaft auf das gewünschte Element angewendet haben, wird der Cursor als bidirektionaler Pfeil dargestellt, der darauf hinweist, dass das Element horizontal skaliert werden kann. Das Ändern des Cursors von horizontal zu vertikal ermöglicht es dem Benutzer, die Größe von Elementen auf einer Webseite einfach horizontal zu ändern.

Ändern des Cursors in einen vertikalen Cursor mit CSS

Es gibt mehrere Möglichkeiten, den Mauszeiger mithilfe von CSS in einen vertikalen Cursor zu ändern. Im Folgenden sind zwei Beispiele aufgeführt:

1. Verwenden der Cursor-Eigenschaft:

Sie können den folgenden CSS-Code verwenden, um den Cursor in einen vertikalen Cursor zu ändern:

In diesem Beispiel legen wir die cursor-Eigenschaft auf col-resize für das body-Element fest. Dieser Wert weist den Browser an, den Cursor als doppelten vertikalen Pfeil zu verwenden, der normalerweise zum Ändern der Spaltengröße verwendet wird.

Anmerkung: Sie können diese Eigenschaft auf jedes andere Element anwenden, wenn Sie den Cursor nur für ein bestimmtes Element in einen vertikalen Cursor ändern möchten.

2. Verwenden der Cursor-Eigenschaft mit einer URL:

Wenn Sie einen anderen Cursor-Stil verwenden möchten, können Sie mithilfe der Cursor-Eigenschaft und der URL-Funktion ein eigenes Bild für den Cursor hochladen:

cursor: url('vertical_cursor.png'), auto;

In diesem Beispiel geben wir den Pfad zum Bild vertical_cursor an.png in der URL-Funktion, die als Cursor für das body-Element verwendet wird. Der Auto-Wert am Ende wird angegeben, damit der Browser den Standardcursor verwendet, wenn kein Bild verfügbar ist.

Hinweis: Das Bild muss im Format sein, damit der eigene Cursor korrekt angezeigt wird.cur oder .png mit Transparenz.

Dies sind nur zwei Möglichkeiten, den Mauszeiger mit CSS in einen vertikalen Cursor zu ändern. Sie können das Passende für Ihre Bedürfnisse und Ihren Stil wählen.

Mit JavaScript

Wenn Sie den Cursor auf Ihrer Website von horizontal zu vertikal ändern müssen, können Sie JavaScript für diese Aufgabe verwenden. Hier ist ein Beispielcode:

Dieser Code ändert den Cursor in einen vertikalen Cursor und wendet den Stil "ew-resize" auf das Body-Element der Seite an. Sie können je nach Ihren Bedürfnissen andere Cursor-Stile verwenden. Zum Beispiel:

document.body.style.cursor = "col-resize";

Dieser Code ändert den Cursor in eine Trennspalte.

Es ist wichtig zu beachten, dass dieser Code innerhalb des Tags platziert werden muss und nach dem Tag positioniert werden muss, um nach dem vollständigen Laden der Seite ausgeführt zu werden.

Anwenden des Cursors

Ein Webentwickler kann den Standardcursor in einen anderen ändern, um die Interaktion des Benutzers mit einem Seitenelement hervorzuheben oder eine bestimmte Atmosphäre auf der Website zu schaffen. Es gibt viele verschiedene Cursor, die von Webentwicklern verwendet werden können.

Einige der am häufigsten verwendeten Cursor sind:

1. Standardcursor: ein Standardcursor, der angibt, dass das Element anklickbar und interoperabel ist.
2. Zeigefinger-Cursor: wird verwendet, um anklickbare Elemente zu kennzeichnen, die wichtig sind oder die Aufmerksamkeit des Benutzers auf sich ziehen.
3. Drag & Drop-Cursor: gibt an, dass das Element an eine andere Position gezogen werden kann.
4. Textauswahl-Cursor: ermöglicht es dem Benutzer, Text oder Elemente auszuwählen.
5. Boot-Cursor: zeigt an, dass der Prozess zum Laden oder Ausführen eines langwierigen Vorgangs aktiv ist.

Um den Cursor eines Elements zu ändern, können Sie die CSS-Eigenschaft des Cursors verwenden. Wenn Sie beispielsweise den Cursor zum Zeigefinger ändern möchten, können Sie den folgenden CSS-Code verwenden:

Dieser Code wendet einen Zeigefinger-Cursor auf ein Element der "element" -Klasse an. Anstelle von "pointer" können Sie andere Werte aus der Liste verwenden.

Die Fähigkeit, verschiedene Cursor zu verwenden, hilft Ihnen, eine interaktive Benutzererfahrung auf einer Webseite zu erstellen.

Auf der Webseite

Mit der CSS-Eigenschaft cursor können Sie die Ansicht des Cursors auf einer Webseite von horizontal in vertikal ändern. Um dies zu tun, fügen Sie dem gewünschten Element oder den Elementen der Seite einen Stil hinzu.

.vertical-cursor 
Это абзац с вертикальным курсором

In diesem Beispiel legt der Stil mit der Klasse "vertical-cursor" den col-resize-Cursor fest, der einen vertikalen Pfeil mit doppelter Linie darstellt. Infolgedessen hat dieser Absatz einen vertikalen Cursor, wenn Sie die Maus darüber bewegen.

Sie können auch andere Werte für die cursor-Eigenschaft verwenden, z. B.:

• row-resize - horizontaler Pfeil mit doppelter Linie
• move - Ein vierzeiliger Cursor, der zum Verschieben von Objekten verwendet wird
• text - Ein vertikaler Pfeil mit einer geraden Linie, der zum Markieren von Text verwendet wird

Mit der CSS-Eigenschaft cursor können Sie das Aussehen und Verhalten des Cursors auf einer Webseite leicht ändern, indem Sie interessante Effekte hinzufügen und die Benutzeroberfläche verbessern.

Beiliegend

Sie können den Cursor in Anwendungen von horizontal in vertikal ändern, indem Sie die CSS-Eigenschaft cursor verwenden. Dazu müssen Sie die Stile auf das gewünschte Element oder die gewünschte Klasse anwenden.

Wenn Sie beispielsweise den Cursor in einer Elementliste in einen vertikalen Cursor ändern möchten, können Sie den folgenden CSS-Code verwenden:

• Zuerst müssen Sie das gewünschte Element oder die gewünschte Klasse auswählen. Wenn es sich beispielsweise um eine Liste von Elementen mit einer list-Klasse handelt, sieht der Stil folgendermaßen aus:
• .list
• Als nächstes verwenden Sie die cursor-Eigenschaft, um den ew-resize-Wert für den horizontalen Cursor festzulegen:
• cursor: ew-resize;
• Endgültiger CSS-Stil:
• .list <
  cursor: ew-resize; >

Wenn Sie also den Cursor-Stil: ew-resize; auf ein Element oder eine Klasse anwenden, können Sie den Cursor in Anwendungen von horizontal in vertikal ändern.