自定义鼠标光标cursor

通过css属性 Cursor:url()自定义鼠标光标。

{cursor:url('图标路径'),default;}

url是自定义鼠标图标路径

default指的是定义默认的光标（通常是一个箭头），以防没有由 URL 定义的可用光标。

图标的格式根据不同的浏览器来分：

IE支持 cur, ani, ico这三种格式。

Google，FF支持 bmp, gif, jpg, cur, ico这几种格式，不支持 ani格式，也不支持 gif动画格式。

在项目中，用到自定义鼠标样式遇到的问题：

IE浏览器下图标地址需要为绝对路径。
图片大小最好是32*32的大小。
IE浏览器如出现鼠标跳动现象可能是因为图标本身有问题，可以尝试网上下载一些标准的cur格式的图标来验证自定义的图标是否有问题。
改变图标的格式不要通过更改图片后缀名来欺骗浏览器,实际上无法显示。

最后附上 cursor属性值

值描述

url 需被使用的自定义光标的URL

default 默认光标（通常是一个箭头）

crosshair 光标呈现为十字线。

pointer 光标呈现为指示链接的指针（一只手）

move 此光标指示某对象可被移动。

e-resize 此光标指示矩形框的边缘可被向右（东）移动。

ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。

nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。

n-resize 此光标指示矩形框的边缘可被向上（北）移动。

se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）。

sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。

s-resize 此光标指示矩形框的边缘可被向下移动（北/西）。

w-resize 此光标指示矩形框的边缘可被向左移动（西）。

text 此光标指示文本。

wait 此光标指示程序正忙（通常是一只表或沙漏）。

help 此光标指示可用的帮助（通常是一个问号或一个气球）。

自定义鼠标光标cursor相关推荐

CSS(列表+表格+链接+自定义鼠标光标）样式
1.CSS列表样式 1.1 list-style-type属性 (值可取none.circle.square.decimal.disc.lower-alpha) 有序列表:列表项目用数字或者字母来表示 ...
如何使用CSS和JavaScript制作自定义鼠标光标
新钛云服已累计为您分享707篇技术干货您是否曾经访问过一个网站并被其惊人的功能所震撼?其中之一可能是一个很酷的鼠标光标,它不同于您习惯的常规箭头或指针光标. 这确实可以改善用户体验,最近我一直想知道 ...
【css】自定义鼠标光标指针样式-前端
本文功能介绍:自定义.定制鼠标光标指针样式! cursor: url(), auto; 除了浏览器提供的鼠标样式,我们还可以借助 cursor: url() 的特性,即可实现定制自己的鼠标样式! /* ...
android 4.4 自定义广播,Android 4.4.2 系统自定义鼠标光标替换接口实现
一.需求背景新项目开发,需预置"天翼云电脑"app,云电脑app界面里其实就是盒子端接入的鼠标和键盘外设,来操作云端的windows系统桌面: 云电脑客户端使用的android系 ...
html中自定义鼠标光标
是不是有时候看着浏览器里默认的光标很窝火?尤其是当自己的网页很fashion的时候,其实,自定义光标形状很容易. CSS中有一个叫cursor的属性.它的值就可以定义光标形状,例如: body{cur ...
Winform程序使用自定义鼠标光标
一.使用系统光标这是最简单的,有一个Cursors集合保存了系统光标,直接设置控件的Cursor属性为Cursors集合的成员即可 this.Cursor = Cursors.Cross; 二.使用 ...
可视化编程——如何自定义鼠标光标
资源文件→添加→新建项选择资源→光标文件新建光标文件页面如下其中32*32是长宽,和大小有关 1位是指颜色多少最左边是颜色栏,右上边是一系列处理光标的画具新建一个有多种颜色的光标类型鼠标右 ...
自定义鼠标光标，引入png图片
1.cursor引入的图片,base64,不要超过50px,可能不显示 <divclassName="nopause"style={{cursor: 'url(' + `${ ...
UE4/UE5 虚幻引擎，设置Mouse Cursor鼠标光标样式
UE虚幻引擎,设置Mouse Cursor鼠标光标样式的两种方法: 第一种.使用Player Controller中内部提供的鼠标样式. 第二种.在Project Settings项目设置的Softw ...

自定义鼠标光标cursor

自定义鼠标光标cursor相关推荐

最新文章

热门文章