Heim > Web-Frontend > CSS-Tutorial > So ändern Sie den Mausstil mit CSS

So ändern Sie den Mausstil mit CSS

青灯夜游
Freigeben: 2023-01-05 16:12:28
Original
12414 Leute haben es durchsucht

In CSS können Sie das Cursor-Attribut verwenden, um den Stil der Maus zu ändern. Dieses Attribut kann die verwendete Cursorform angeben, wenn der Mauszeiger beispielsweise innerhalb der Grenze eines Elements platziert wird (..)“ kann der Mausstil angepasst werden, „Fadenkreuz“ legt den Fadenkreuzstil fest und „Zeiger“ legt den kleinen Handstil fest.

So ändern Sie den Mausstil mit CSS

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

In CSS können Sie das Cursor-Attribut verwenden, um den Stil der Maus zu ändern.

cursor-Attribut definiert die Cursorform, die verwendet wird, wenn der Mauszeiger innerhalb der Grenzen eines Elements platziert wird.

1 Das Cursor-Attribut gilt nur für Zeigegeräte ( (z. B. Mäuse) gültig für Geräte; es hat keine Auswirkung auf Touch-Geräte.

3. Nicht alle Browser unterstützen alle Attributwerte des Cursor-Attributs und möglicherweise zeigen nicht alle Attributwerte in allen Browsern und Betriebssystemen den gleichen Effekt.



Beispiel:

1. Bildcursor (benutzerdefinierter Cursor) Eine oder mehrere durch Kommas getrennte URL(), die auf das Bild zeigen, das als Cursor verwendet werden soll. Der Benutzeragent ruft die Cursor-URL() vom ersten ab. Wenn der Benutzeragent den ersten Cursor der Cursorliste nicht verarbeiten kann, muss er versuchen, die Cursorliste usw. zu verarbeiten. Wenn der Benutzeragent keines der bereitgestellten Bilder verarbeiten kann (siehe Browser-Unterstützung), muss das Schlüsselwort „cursor“ verwendet werden. Ende der Liste. Die optionalen Summenkoordinaten identifizieren die genaue Position der Zeigerposition (d. h. des Hotspots) im Bild.

.custom {
  cursor: url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/cursor/clock-cursor.png), url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/cursor/clock-cursor.cur), pointer;
}
Nach dem Login kopieren



2. Zoom- und Scroll-Cursor

So ändern Sie den Mausstil mit CSSE-Größe ändern, N-Größe ändern, Ne-Größe ändern, NW-Größe ändern, S-Größe ändern, Se-Größe ändern, SW-Größe ändern, W-Größe ändern

bedeutet, etwas zu verschieben einige Kanten. Ändern Sie beispielsweise die Größe, wenn die Bewegung mit dem Cursor in der südöstlichen Ecke des Felds beginnt.

ew-resize, ns-resize, nesw-resize, nwse-resize

repräsentieren bidirektionale Größenänderungscursor. Diese Cursortypen erscheinen normalerweise als Zwei-Wege-Pfeile in verschiedene Richtungen.

col-resize:

Dieser Cursor wird normalerweise als Links- und Rechtspfeil dargestellt, wobei sie durch einen vertikalen Balken getrennt sind. Es zeigt an, dass die Größe von Elementen/Spalten horizontal geändert werden kann. Er ähnelt dem Cursor, den Sie in Programmen wie MS Excel sehen.

Zeilengröße ändern:

Dieser Cursor erscheint normalerweise als Auf- und Ab-Pfeil, wobei die beiden durch einen horizontalen Balken getrennt sind. Es zeigt an, dass die Größe von Elementen/Zeilen vertikal geändert werden kann. Er ähnelt dem Cursor, den Sie in Programmen wie MS Excel sehen.

Alles scrollen:

Dieser Cursor erscheint normalerweise als Aufwärts-, Abwärts-, Links- und Rechtspfeil mit einem Punkt in der Mitte. Das bedeutet, dass etwas in jede Richtung gescrollt werden kann.

.n-resize {
  cursor: n-resize;
}

.ne-resize {
  cursor: ne-resize;
}

.e-resize {
  cursor: e-resize;
}

.se-resize {
  cursor: se-resize;
}

.s-resize {
  cursor: s-resize;
}

.sw-resize {
  cursor: sw-resize;
}

.w-resize {
  cursor: w-resize;
}

.nw-resize {
  cursor: nw-resize;
}

.se-resize {
  cursor: se-resize;
}

.ew-resize {
  cursor: ew-resize;
}

.ns-resize {
  cursor: ns-resize;
}

.nesw-resize {
  cursor: nesw-resize;
}

.nwse-resize {
  cursor: nwse-resize;
}

.col-resize {
  cursor: col-resize;
}

.row-resize {
  cursor: row-resize;
}

.all-scroll {
  cursor: all-scroll;
}
Nach dem Login kopieren


Hinweis:

So ändern Sie den Mausstil mit CSSEs ist üblich, den Mauszeigerstil zu steuern und festzulegen, aber missbrauchen Sie den Cursor nicht und legen Sie nicht einfach ein benutzerdefiniertes Bild als Mausstil fest. Dadurch wird die Webseite kompliziert und stimmt nicht mit der Benutzererfahrung überein. Denken Sie daran, den Cursor mit Vorsicht zu verwenden.

Cursor-Attributwert

Wert BeschreibungurlHinweis: Definieren Sie immer einen normalen Cursor am Ende dieser Liste, falls kein verfügbarer Cursor durch die URL definiert ist. Standardcursor (normalerweise ein Pfeil) Standard. Der vom Browser gesetzte Cursor. Der Cursor wird als Fadenkreuz dargestellt. Der Cursor wird als Zeiger (eine Hand) dargestellt, der einen Link anzeigt. Dieser Cursor zeigt an, dass ein Objekt verschoben werden kann. Dieser Cursor zeigt an, dass der Rand des rechteckigen Felds nach rechts (Osten) verschoben werden kann. Dieser Cursor zeigt an, dass der Rand des rechteckigen Felds nach oben und nach rechts (Norden/Osten) verschoben werden kann. Dieser Cursor zeigt an, dass der Rand des rechteckigen Felds nach oben und nach links (Norden/Westen) verschoben werden kann. Dieser Cursor zeigt an, dass der Rand des rechteckigen Felds nach oben (Norden) verschoben werden kann. Dieser Cursor zeigt an, dass der Rand des rechteckigen Felds nach unten und nach rechts (Süden/Osten) verschoben werden kann. Dieser Cursor zeigt an, dass der Rand des rechteckigen Felds nach unten und links (Süden/Westen) verschoben werden kann. Dieser Cursor zeigt an, dass der Rand des rechteckigen Felds nach unten (Süden) verschoben werden kann. Dieser Cursor zeigt an, dass der Rand des rechteckigen Felds nach links (Westen) verschoben werden kann. Dieser Cursor zeigt Text an. Dieser Cursor zeigt an, dass das Programm beschäftigt ist (normalerweise eine Uhr oder eine Sanduhr). Dieser Cursor zeigt verfügbare Hilfe an (normalerweise ein Fragezeichen oder eine Sprechblase).
Die URL des zu verwendenden benutzerdefinierten Cursors.

Standard
Auto
Fadenkreuz
Zeiger
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
Text
Warten
Hilfe

So ändern Sie den Mausstil mit CSS

(Lernvideo-Sharing: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo ändern Sie den Mausstil mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage