用图片替代cursor光标样式

鼠标光标样式有限，可参考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.去试试吧！

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

用图片替代cursor光标样式相关推荐

UE4/UE5 虚幻引擎，设置Mouse Cursor鼠标光标样式
UE虚幻引擎,设置Mouse Cursor鼠标光标样式的两种方法: 第一种.使用Player Controller中内部提供的鼠标样式. 第二种.在Project Settings项目设置的Softw ...
HTML+CSS---定位（相对定位--绝对定位--固定定位--设置元素的层叠顺序)---表单---设置光标样式---透明度（opacity属性定义元素的不透明度--IE的半透明滤镜）---外边线
文章目录定位静态定位(static) 相对定位(relative) 绝对定位(absolute) 固定定位(fixed) 设置元素的层叠顺序表单设置光标样式透明度 opacity属性定义元素 ...
前端：CSS/12/display属性，overflow属性，cursor光标类型，CSS定位，综合案例：今日闪价
display属性功能:规定网页元素如何显示: 取值:none(隐藏),block(以块元素显示),inline(以行内元素显示): block:可以实现将行内元素转换为块元素: inline:可以 ...
Unity 按住A键更改鼠标光标样式
按住A键更改为准星样式首先自己抠图抠出个准星,要png格式的图片然后在准星的Inspector面板里更改Texture Type为Cursor (一定要修改,不然会显示不正确) 然后创建脚本挂载到 ...
常用cursor光标说明
1.cursor语法: cursor : auto | crosshair | default | hand | move | help | wait | text | w-resize |s-res ...
css如何调整红心样式_怎么在css中改变光标样式
在css中cursor属性是用来定义了鼠标指针放在一个元素边界范围内时所用的光标形状:我们可以通cursor属性来设置鼠标光标(指针)样式. cursor属性的语法: cursor:auto|cros ...
html设置自定义光标,pixi.js 自定义光标样式
pixi 介绍 Pixi是一个超快的2D渲染引擎,通过Javascript和Html技术创建动画或管理交互式图像,从而制作游戏或应用. 游戏中都会做一些跟整个游戏画面风格相符的定制光标,比如英雄联盟中 ...
kde 配置桌面_在KDE桌面中为GTK应用程序配置鼠标光标样式
kde 配置桌面 Update on Jan. 7, 2012: The package for the gtk application style setting on KDE 4.7 is kcm ...
鼠标箭头光标样式插件MagicMouse.js
下载地址 MagicMouse.js是一个自定义鼠标光标类库,基于vue实现,用来创建一个很酷的,互动的光标跟随鼠标指针的一个圆样式.需要隐藏系统默认光标样式html,* { cursor: none ...
css指针光标样式小手图标
css指针光标样式小手图标: 适用于各浏览器使用的标准大小:32px*32px,右键保存图片可用 PS:找了好一会儿,才找到这样的指针光标小手图片,分享下

用图片替代cursor光标样式

用图片替代cursor光标样式相关推荐

最新文章

热门文章