Der Cursor-Cursor-Stil wird durch Bilder ersetzt

Der Mauszeigerstil ist begrenzt, bitte beachten Sie ihn. Sie können den Cursorstil anpassen, indem Sie „cursor:url('xxx.cur',auto;“) festlegen, aber er wird immer nicht wirksam Warum. Was zu tun? Eine andere Möglichkeit besteht darin, den Mauszeiger durch ein Bild zu ersetzen. So verwenden Sie es.

1. Erstellen Sie ein Cursorbild (PS und andere Tools), achten Sie darauf, keinen weißen Hintergrund zu verwenden, sondern einen transparenten Hintergrund, bei dem es sich normalerweise um ein Bild im GIF- oder PNG-Format handelt.

Bild 1 Das Pfeilbild, das ich gemacht habe, ist 32*32px

2 Fügen Sie es mit ein span tag Bild

<span style="color: #0000ff"><</span><span style="color: #800000">span </span><span style="color: #ff0000">id</span><span style="color: #0000ff">="cursorLRArrow"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="display:none;position:absolute;z-index:9998;width:32px;height:32px;background-image:url(&#39;left_right_arrow_32.gif&#39;);cursor:none;pointer-events:none"</span><span style="color: #0000ff">><br></</span><span style="color: #800000">span</span><span style="color: #0000ff">></span>

Erklärung der Stilattribute

display:none wird zunächst nicht angezeigt

position:absolute absolute Positionierung, mit links und top, um die Position eines übergeordneten Elements zu steuern, das wie folgt positioniert ist (Position: relativ/absolut). Wenn kein solches übergeordnetes Element gefunden wird, relativ zum Körper

z-index:9998 Ebenenhöhe , je höher es ist, desto weniger wird es blockiert, das Maximum ist 2147483647

Breite, Höhe Stellen Sie die gleiche Breite und Höhe wie das Bild ein

Hintergrundbild stellt das Bild ein

cursor:none Der Mauszeiger wird nicht angezeigt

pointer-events:none reagiert nicht auf Mausereignisse. Ereignisse können diese Ebene durchdringen und haben keinen Einfluss auf die Reaktion niedrigerer Elemente auf Mausereignisse

3. Ersetzen des Mauszeigers

$('body').mousemove( x = e.pageX;  y = e.pageY; ).css('cursor','none''#cursorLRArrow''inline-block'-15)+'px'-10)+'px''#cursorLRArrow'

Das obige ist der detaillierte Inhalt vonDer Cursor-Cursor-Stil wird durch Bilder ersetzt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!