鼠标光标样式有限,可参考http://css-cursor.techstream.org/,自定义光标样式可用设置cursor:url(‘xxx.cur‘,auto;),可是老是不生效,不知什么原因。那怎么办呢?还有一种办法,就是用图片替代鼠标光标,下面就介绍如何使用之。
1.制作光标图片(ps等工具),注意不要用白底,用透明底,透明底一般为gif或者png格式图片。
图1 我做的箭头图片32*32px
2.用一个span标签包含图片
<span id="cursorLRArrow" style="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>
样式属性解释
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.去试试吧!
时间: 2024-10-26 09:57:05