Wie ändere ich die Form des Mauszeigers mit CSS? (Beispieldemonstration)

Ich glaube, dass unterschiedliche Mausstile beim Durchsuchen wichtiger Websites zu unterschiedlichen Erlebnissen führen. Dieser Artikel zeigt Ihnen, wie Sie die Form der Maus über CSS ändern können. CSS-Cursor-Attribut hat einen bestimmten Referenzwert. Freunde in Not können darauf verweisen.

Effektanzeige

Das Cursor-Attribut gibt den Typ (die Form) des anzuzeigenden Cursors an. Diese Eigenschaft definiert die Cursorform, die verwendet wird, wenn der Mauszeiger innerhalb der Grenzen eines Elements platziert wird. Alle gängigen Browser unterstützen das Cursor-Attribut.

Im Folgenden geben wir Ihnen nacheinander eine detaillierte Einführung anhand des spezifischen Beispielcodes für die Änderung der Form des CSS-Cursors und des Mauszeigers:

HTML-Code: Container definieren

<div class="content">
			<div class="box box1"><a href="">CSS鼠标手型效果</a></div>
			<div class="box box2"><a href="">CSS鼠标手型效果</a></div>
			<div class="box box3"><a href="">CSS鼠标十字型效果</a></div>
			<div class="box box4"><a href="">CSS鼠标问号效果</a></div>
			<div class="box box5"><a href="">CSS鼠标等待效果</a></div>
		</div>

Cursor The Das Handattribut bewirkt, dass die Maus den Handeffekt anzeigt.

.box1 a{
				background-color: red;
				cursor:hand;
			}

Das Zeigerattribut des Cursors bewirkt, dass die Maus auch den Handeffekt anzeigt, es ist jedoch mit einer Vielzahl von Browsern kompatibel

wird empfohlen. Das Fadenkreuzattribut des Cursors sorgt dafür, dass die Maus einen kreuzförmigen Effekt anzeigt.

.box2 a{
				background-color: #DBDBDB;
				cursor:pointer;
			}

Das Hilfeattribut des Cursors sorgt dafür, dass die Maus einen Fragezeicheneffekt anzeigt.

.box3 a{
				background-color:#777777;
				cursor:crosshair;
			}

Das Warteattribut von Cursor bewirkt, dass die Maus einen Warteeffekt anzeigt. Dies ist ein Ladeeffekt

.box4 a{
				background-color:#E6E6E6;
				cursor:help;
			}

Cursor Zusätzlich zu den oben genannten Mauscursor-Formeffekten gibt es auch Cursoreffekte, die unterschiedliche Pfeilrichtungen anzeigen: e-resize (Pfeil zum rechts), ne-resize (Pfeil nach rechts), n -resize (Pfeil nach oben), nw-resize (Pfeil nach links oben), w-resize (Pfeil nach links), sw-resize (Pfeil nach links unten), s-resize (Pfeil nach unten), Größe ändern (Pfeil nach rechts unten).

Das obige ist der detaillierte Inhalt vonWie ändere ich die Form des Mauszeigers mit CSS? (Beispieldemonstration). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!