用图片替代cursor光标样式

电玩女神 2023-06-03 12:54 31阅读 0赞

鼠标光标样式有限，可参考[http://css-cursor.techstream.org/][http_css-cursor.techstream.org]，自定义光标样式可用设置cursor:url('xxx.cur'),auto;。还有一种办法，就是用图片替代鼠标光标，下面就介绍如何使用之。

1.制作光标图片（ps等工具），注意不要用白底，用透明底，透明底一般为gif或者png格式图片。

![images2015-cnblogs-com_blog_664834_201707_664834-20170707105938362-1933960754.gif][]

图1 我做的箭头图片32\*32px

2.用一个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.鼠标光标的替换

$(function(){ $('body').mousemove(function(e){ 　　 var x = e.pageX; //光标距文档左距
                var y = e.pageY; //光标距文档上距
     　 $(this).css('cursor','none'); 　　 $('#cursorLRArrow').css({ 　　　　display:'inline-block', 　　　　left:(x-15) 'px', 　　　　top:(y-10) 'px' 　　 }); 　　 $('#cursorLRArrow').show(); }); });

4.去试试吧！

更多专业前端知识，请上 **【猿2048】www.mk2048.com**

[http_css-cursor.techstream.org]: http://css-cursor.techstream.org/
[images2015-cnblogs-com_blog_664834_201707_664834-20170707105938362-1933960754.gif]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/50/images2015-cnblogs-com_blog_664834_201707_664834-20170707105938362-1933960754.gif