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

3. Remplacement du curseur 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!