cursor遊標樣式被圖片替代

滑鼠遊標樣式有限，可參考，自訂遊標樣式可用設定cursor:url('xxx.cur',auto;)，可是老是不生效，不知什麼原因。那怎麼辦呢？還有一種辦法，就是用圖片取代滑鼠遊標，以下就介紹如何使用之。

 

1.製作遊標圖片（ps等工具），注意不要用白底，用透明底，透明底一般為gif或png格式圖片。

 

圖1 我做的箭頭圖片32*32px

 

2.用一個span標籤包含圖片

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

樣式屬性解釋

display:none 初始不顯示

position:absolute 絕對定位，以left，top控制位置，相對含有(position:relative/absolute)這樣定位的父元素的位置，如果找不到這樣的父元素，相對於body

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'

以上是cursor遊標樣式被圖片替代的詳細內容。更多資訊請關注PHP中文網其他相關文章！