curseur le style du curseur est remplacé par des images

Le style du curseur de la souris est limité, veuillez vous y référer. Vous pouvez personnaliser le style du curseur en définissant curseur:url('xxx.cur',auto;), mais cela ne prend toujours pas effet. pourquoi. Ce qu'il faut faire? Une autre façon consiste à utiliser une image pour remplacer le curseur de la souris. Voici comment l'utiliser.

1. Créez une image de curseur (ps et autres outils), veillez à ne pas utiliser de fond blanc, utilisez un fond transparent, qui est généralement une image au format gif ou png.

Image 1 L'image de flèche que j'ai faite mesure 32*32px

2. span tag Image

<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>

Explication des attributs de style

affichage : aucun n'est affiché initialement

position : positionnement absolu absolu, avec gauche et top pour contrôler la position. Par rapport à la position d'un élément parent positionné comme ceci (position : relative/absolue si aucun élément parent n'est trouvé, par rapport au corps

z-index:9998 hauteur de couche). , plus il est haut, moins il sera bloqué. , le maximum est de 2147483647

largeur, hauteur Définissez la même largeur et hauteur que l'image

background-image définissez l'image

cursor:none Le curseur de la souris n'est pas affiché

pointer-events:none ne répond pas aux événements de la souris. Les événements peuvent pénétrer dans cette couche et n'affecteront pas la réponse des éléments inférieurs aux événements de la souris

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!