首页 >web前端 >js教程 >cursor光标样式被图片替代

cursor光标样式被图片替代

巴扎黑
巴扎黑原创
2017-07-24 14:31:262284浏览

鼠标光标样式有限,可参考,自定义光标样式可用设置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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn