Webentwickler müssen häufig die Standardansicht des Cursors auf ihren Websites ändern. Manchmal müssen Sie jedoch den normalen, standardmäßigen Cursor zurückgeben. Dies kann erforderlich sein, wenn ein Benutzer eine Website verlässt oder eine bestimmte Seite kein spezielles Cursordesign benötigt. Aber wie kann ich den Standardcursor auf der Website zurückgeben? In diesem Artikel werden wir Ihnen ausführlich darüber erzählen.
Zunächst ist es erwähnenswert, dass die Änderung des Cursors auf einer Webseite mithilfe von CSS-Stilen erfolgt. Traditionell ändert sich das Erscheinungsbild, wenn Sie den Mauszeiger über interaktive Elemente einer Website bewegen, in eine Hand oder ein anderes Symbol. Um den Cursor jedoch auf seine Standardansicht zurückzusetzen, benötigen Sie einen einfachen CSS-Code.
Sie müssen Ihrer Stildatei den folgenden Code hinzufügen:
Dieser Code weist den Browser an, dass ein Standardcursor für den gesamten Body-Inhalt verwendet werden muss. Auf diese Weise kehrt der Cursor auf Ihrer Website in die normale Ansicht zurück, die er standardmäßig hat.
Denken Sie daran, dass, wenn Sie zuvor verschiedene benutzerdefinierte Cursor für einzelne Elemente auf der Website verwendet haben, diese auch nach der Anwendung dieses CSS-Codes durch einen Standardcursor ersetzt werden. Stellen Sie daher sicher, dass Sie den Cursor vor dem Hinzufügen des obigen Codes wirklich auf seine normale Ansicht auf der gesamten Seite zurücksetzen müssen.
Warum kann sich der Cursor auf der Website ändern?
Außerdem kann sich der Cursor je nach den Aktionen des Benutzers auf der Website ändern. Wenn Sie beispielsweise auf ein Textfeld oder eine Schaltfläche zum Senden eines Formulars zeigen, ändert sich der Cursor möglicherweise zu einem vertikalen Strich oder zu einer Zeigefinger-Hand, um Sie darauf hinzuweisen, dass Sie Daten eingeben oder eine Aktion ausführen können.
Manchmal kann sich der Cursor aufgrund von Popup-Fenstern oder JavaScript-Skripten, die die Eigenschaften des Cursors festlegen, auf der Website ändern. Wenn Sie beispielsweise über ein Bild schweben, kann das Skript dazu führen, dass der Cursor auf eine Lupe geändert wird, um das Bild zu vergrößern, oder auf einen Bleistift, um es im Hintergrund zu zeichnen.
In einigen Fällen kann sich der Cursor jedoch ohne ersichtlichen Grund ändern. Dies kann auf Fehler im Markup oder in den Site-Skripten zurückzuführen sein. In solchen Fällen müssen Sie geeignete Maßnahmen ergreifen, um den Standardcursor zurückzusetzen und die Benutzerfreundlichkeit der Website für die Benutzer zu gewährleisten.
Wie kann ich den aktuellen Cursor auf einer Website ermitteln?
Sie können JavaScript verwenden, um den aktuellen Cursor auf einer Website zu bestimmen. Dazu wenden Sie einen Mousemove-Ereignishandler auf das Element an, auf dem Sie den Cursor verfolgen möchten.
Im Mousemove-Ereignishandler können Sie mithilfe der Eigenschaften clientX und clientY des Ereignisobjekts die Koordinaten des Cursors abrufen. Anschließend können Sie mit bedingten Operatoren feststellen, ob sich der Cursor im angegebenen Bereich befindet, und den Stil des Elements entsprechend dem aktuellen Cursor ändern.
Wenn Sie beispielsweise feststellen möchten, dass sich der Cursor im Bereich eines Elements mit der ID my-element befindet, können Sie den folgenden Code verwenden:
const element = document.getElementById('my-element');element.addEventListener('mousemove', function(event) element.offsetLeft && cursorX < element.offsetLeft + element.offsetWidth &&cursorY >element.offsetTop && cursorY < element.offsetTop + element.offsetHeight) else >);In diesem Beispiel wird der Cursor in einem Element mit der ID my-element in 'pointer' geändert, andernfalls wird der Cursor auf den Standardwert zurückgesetzt ('default').
Wie kann ich einen Standardcursor auf einer Website ohne Programmierung zurückgeben?
Wenn Sie mit der Programmierung nicht vertraut sind und keine komplexen Methoden verwenden möchten, um einen Standardcursor auf Ihrer Website zurückzugeben, gibt es einige einfache Möglichkeiten, dies ohne Probleme zu tun.
Der erste Weg ist die Verwendung von CSS. Um dies zu tun, müssen Sie dem Abschnitt Ihres HTML-Dokuments den folgenden Code hinzufügen:
body
Sie setzen also die Cursor-Eigenschaft des body-Elements auf "auto", was bedeutet, dass der Browser den vom Betriebssystem definierten Standardcursor verwendet.
Die zweite Methode besteht darin, das style-Attribut in Verbindung mit dem Tag zu verwenden. Sie müssen dem Tag den folgenden Code hinzufügen :
Legen Sie also den Wert des style-Attributs für das Tag als "cursor: auto;" fest und der Standardcursor wird auf Ihrer Website zurückgegeben.
Beide Methoden ermöglichen es Ihnen, den Standardcursor auf Ihrer Website ohne Programmierung zurückzugeben. Folgen Sie einfach den Anweisungen und genießen Sie das Ergebnis!
Wie kann ich den Standardcursor auf einer Website mit CSS zurückgeben?
Wenn Sie einen Standardcursor auf Ihrer Website zurückgeben möchten, können Sie dafür CSS verwenden. Um dies zu tun, müssen Sie Ihrer Stylesheet-Datei einen kleinen CSS-Code hinzufügen.
Um einen Standardcursor zurückzugeben, können Sie die Eigenschaft "cursor" mit dem Wert "auto" verwenden. Zum Beispiel:
Ein Beispiel:
Sie können diese Eigenschaft auf jedes Element auf Ihrer Website anwenden, auf das Sie den Standardcursor zurückgeben möchten.
Alternativ können Sie den Wert "default" für die Eigenschaft "cursor" verwenden. Es gibt auch einen Standardcursor auf Ihrer Website zurück. Zum Beispiel:
Ein Beispiel:
Zusätzlich zu diesen beiden Werten bietet CSS auch andere Optionen für die Eigenschaft "Cursor", z. B. "pointer", "crosshair" usw. Sie können den gewünschten Wert je nach Ihren Bedürfnissen auswählen.
Jetzt wissen Sie, wie Sie den Standardcursor auf einer Website mit CSS zurückgeben können. Denken Sie daran, Ihre Änderungen zu speichern und Ihre Website zu aktualisieren, um die Ergebnisse zu sehen.
