カーソル カーソル スタイルが画像に置き換えられます

マウスカーソルのスタイルは制限されています。cursor:url('xxx.cur',auto;)を設定することでカーソルのスタイルをカスタマイズできますが、常に有効になりません。 。それではどうすればいいでしょうか？もう 1 つの方法は、画像をマウス カーソルの代わりに使用することです。その使用方法は次のとおりです。

1. カーソル画像を作成します（PS およびその他のツール）。白い背景を使用しないように注意し、透明な背景を使用します。透明な背景は通常、gif または png 形式の画像です。

図1 私が作った矢印の絵は32*32pxです

2.spanタグを使って絵を含めます

<span style="color: #0000ff"><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('left_right_arrow_32.gif');cursor:none;pointer-events:none"</span><span style="color: #0000ff">><br></span><span style="color: #800000">span</span><span style="color: #0000ff">></span></span>

スタイル属性の説明

初期状態ではdisplay:noneが表示されません

position:absolute 絶対配置では、left と top を使用して、そのような配置 (position: 相対/絶対) を含む親要素の位置を基準とした位置を制御します。そのような親要素が見つからない場合は、本文

を基準にします。 z-index: 9998 レイヤーの高さ、高いほど高さはブロックされません、最大値は 2147483647 です

width,height 画像と同じ幅と高さを設定します

background-image 画像を設定します

cursor:none マウスカーソルは表示されません

pointer-events:none はマウス イベントに応答しません。イベントはこのレイヤーを通過できるため、マウス イベントに対する基になる要素の応答には影響しません

3. マウス カーソルの置き換え

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

以上がカーソル カーソル スタイルが画像に置き換えられますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。