Custom CSS Cursor

Der HTML -Code für das obige Szenario ist unten angegeben:

CSS Cursor Selector	Cursorstil
Cursor: Zeiger	Zeiger
Cursor: Fortschritt	Fortschritt
Cursor: Nicht zugelassen	nicht erlaubt
Cursor: Keine	keiner
Cursor: Bewegung	Umzug
Cursor: greifen	greifen
Cursor: Kopie	Kopieren
Cursor: col-resize	col-resize
Cursor: Row-Resize	Zeilenauflös
Cursor: Text	Text

Der obige Code generiert das folgende Ergebnis:

Im nächsten Abschnitt werden wir verschiedene Stile auf die HTML -Elemente anwenden.

Stil „alle“ Elemente

*
Polsterung: 0;
Rand: 0;
Schriftfamilie: Arial, Helvetica, Sans-Serif;

Alle HTML -Elemente werden mit CSS -Stilen angewendet, die unten erklärt werden:

• • “Polsterung”Eigentum mit“0Der Wert enthält keinen Platz um den Inhalt des Elements.
  • “Rand”Eigentum mit“0Der Wert fügt keinen Platz außerhalb der einzelnen Elemente hinzu.
  • “Schriftfamilie"Eigenschaft wird ein Wert zugewiesen"Arial, Helvetica, ohne Serif”. Die Liste der Schriftstile wird angegeben, um sicherzustellen, ob der erste Stil vom Browser nicht unterstützt wird, andere Stile müssen angewendet werden.

Stil „Tabelle“ Element

Tisch
Rand: 0px Auto;
Grenze: 1PX solide Gainsboro;

Das HTML -Tabellenelement wird mit den nachstehend beschriebenen CSS -Eigenschaften angewendet:

• • “Grenze"Eigenschaft wird mit dem Wert festgelegt"1PX Solid Gainsboro”Das repräsentiert die Grenzbreite, den Grenzstil und die Grenzfarbe jeweils.

“RandEigenschaft verhält sich wie oben angegeben.

Stil "TD" Element

td
Text-Align: Mitte;

Der

Stil „Button“ Element

Taste
Hintergrundfarbe: CadetBlue;
Polsterung: 10px 10px;
Farbe: #ffffff;
Breite: 150px;

Das im obige HTML -Code verwendete Knopfelement wird mit neuen CSS -Eigenschaften gestaltet, die unten erklärt werden:

• • “HintergrundfarbeGibt die Farbe für den Hintergrund des Elements an.
  • “Polsterung"Mit den Werten als" zugewiesen "10px 10px”Fügt Platz von 10px am Top-Bottom und 10px an den links-rechtlichen Seiten der Elemente des Elements hinzu.
  • “Farbe”Passt die Schriftfarbe des Elements an.
  • “BreiteIst die Eigenschaft, die die Breite des Elements anpasst.

Der obige Code generiert das folgende Ergebnis:

Bisher haben wir die von CSS bereitgestellten Cursoren besprochen. Im kommenden Abschnitt beschreibt das Beispiel, wie Sie einen benutzerdefinierten Cursor mit CSS erstellen können.

Benutzerdefinierte Cursor CSS

Die Entwickler müssen geeignete Cursoren für ihre Anwendungen verwenden. Cursors sollten attraktiv gemacht werden, um die Aufmerksamkeit der Benutzer auf sich zu ziehen. Darüber hinaus kann der benutzerdefinierte Cursor für diesen Zweck erstellt werden.

Schauen Sie sich das Beispiel unten an!

Beispiel: So erstellen Sie benutzerdefinierten Cursor mit CSS?

Fügen Sie in HTML zwei Divelemente hinzu. Eins mit der Klasse “Kreis"Und der andere mit der Klasse"Punkt”.

Html

Lassen Sie uns den CSS -Abschnitt voranschreiten.

Stil „Körper“ Element

Körper
Höhe: 100VH;

Das Körperelement der HTML -Datei wird mit dem Stil angewendet “HöheEigenschaft zum Festlegen der Höhe des Elements.

Stil „Kreis“ div

.Kreis
Breite: 20px;
Höhe: 20px;
Grenze: 2px fest weiß;
Grenzradius: 50%;

Unten finden Sie die Erklärung der CSS -Eigenschaften, die auf das Div -Element mit Klasse angewendet werden “Kreis”:

• • “BreiteDie Eigenschaft passt die Breite des Elements an.
  • “GrenzeEigenschaft mit dem als "angegebenen Wert"2px fest weiß”Repräsentiert die Randbreite, den Grenzstil und die Farbe.
  • “GrenzradiusEigentum verändert die Grenzrunde des Elements.

Stil „Punkt“ div

.Punkt
Breite: 5px;
Höhe: 5px;
Hintergrundfarbe: weiß;
Grenzradius: 50%;

Das DIV -Element mit Klassenpunkt ist mit unterschiedlichen Eigenschaften versehen, die unten beschrieben werden:

• • “HintergrundfarbeEigenschaft gibt die Farbe des Hintergrunds des Elements an.
  • “Grenzradius”Legt die Kanten des Elements um.
  • Andere Eigenschaften funktionieren genauso wie diskutiert.

Der angegebene Code zeigt den folgenden Cursor auf der Webseite an:

Wir haben den Cursor mit HTML und CSS erstellt. Jetzt, im nächsten Abschnitt.

JavaScript

Die Beschreibung des obigen JavaScript -Codes ist unten angegeben:

• • “Das Tag wird mit dem Tag gepaart, mit dem JavaScript -Code geschrieben wird.
  • “ConstKeyword zeigt, dass das CONT -Schlüsselwort, gefolgt von einer Variablen, nicht neu zugewiesen werden kann.
  • “dokumentieren.QuerySelector ('.Kreis')”Gibt das Kreis -Div -Element zurück, das mit dem angegebenen Selektor im Dokument übereinstimmt.
  • “dokumentieren.QuerySelector ('.Punkt')”Gibt das Punkt -Div -Element zurück, das mit dem angegebenen Selektor im Dokument übereinstimmt.
  • “const mosioneCursor = (e) =>Diese Funktion gibt die Cursorfunktion an.
  • “e.Clienty”Gibt die vertikale Koordinate zurück, wenn das Mausereignis ausgelöst wurde.
  • “e.Clientx”Gibt die horizontale Koordinate zurück, wenn das Mausereignis ausgelöst wird.
  • “Cursorcircle.Stil.verwandeln”Der Kreis Div wird mit Stiltransformation angewendet.
  • “Cursorpoint.Stil.verwandelnDie Punktdiv wird mit Stiltransformation angewendet.
  • “translate ($ Mousex px, $ mausy px)Der Wert der Transformationseigenschaft legt die horizontalen und vertikalen Koordinaten fest.
  • “Fenster.AddEventListener ('Maus', MoveCursor)Event -Hörermethode hört die Mausbewegung an. Es ist Teil des globalen Fensterobjekts.

Nach der Bereitstellung der oben genannten Codeblöcke bewegt sich der Cursor automatisch auf dem Bildschirm, wie unten gezeigt:

Das ist cool! Wir haben einen benutzerdefinierten Cursor mit verschiedenen CSS -Eigenschaften erstellt.

Abschluss

Das CSS “MauszeigerEigenschaften haben zahlreiche Werte, die verschiedene Cursorstile anzeigen. Durch die Verwendung der HTML -Elemente und CSS -Eigenschaften können wir jedoch maßgeschneiderte Cursoren vornehmen. Dann wird JavaScript -Code implementiert, um seine Funktionalität zu aktivieren. Diese Studie hat gezeigt, wie man benutzerdefinierte CSS -Cursors mit einem praktischen Beispiel erstellt.

• « ESPTOP 10 Schlafmodi und deren Stromverbrauch
• CSS -Breite passen Inhalt »