百度360必应搜狗淘宝本站头条
python判断字典是否为空crontab每周一执行aes和des区别安装指定版本npmadb pull
当前位置：网站首页 > IT知识 > 正文

令人眼前一亮的——鼠标指针自定义

liuian 2025-01-11 15:10 17 浏览

如果经常逛别人博客会发现，有些个人博客鼠标指针并不是系统指针，而是自定义的。这些小细节确实能让人眼前一亮。



研究了下发现实现其实很简单，而且也很常用。


cursor


正是基于这个日常开发中十分常用的鼠标样式属性来实现的。它有个被忽视的属性——url。可以使用url在引入图片或者cur文件来自定义网站的鼠标样式。


注意点


1：如果使用图片自定义，必须使用png，如果使用其它格式的图片将无法加载


2：如果使用图片自定义，大小最好在32*32，不宜过大，过大的图片同样不加载


3：png才是通用的，cur是适用于window的系统指针文件，mac请替换为对应的系统鼠标指针文件格式


如何找鼠标指针文件


1：自制png，如果是公司项目，可以让ui设计


2：美化网站


可以去致美化看看，使用的时候注意版权。


如何使用png/cur文件


其实用法是一样的，都是基于url实现。


cur:


cursor: url(/src/assets/cursor/KUDACursorsSet/Arrow.cur),auto;



png:


cursor: url(/src/assets/img/LsCursor.png),auto;



如何便捷替换网站内的所有指针


目前没有太好的方案便捷的替换网站内所有的鼠标样式，毕竟cursor也是依赖选择器来实现的，而且cursor属性会被覆盖，不能同一dom添加多个。这就导致只能根据不同选择器来设置不同的鼠标样式，如：


body{
  cursor: url(/src/assets/cursor/KUDACursorsSet/Arrow.cur),auto;
  /* 文本鼠标指针样式 */
  p,span{
    cursor: url(/src/assets/cursor/KUDACursorsSet/ArrowUp.cur), text !important;
  }

  /* 鼠标悬停在链接上时 */
  a,button {
    cursor: url(/src/assets/cursor/KUDACursorsSet/Link.cur),pointer !important;;
  }

}


以上样式肯定是不全的，只能大概设置样式。其它样式的设置，方便点的方法是设置class名，哪些dom需要这些样式，手动添加class名称，或者添加全局变量方法(依赖于less/scss)，配合全局样式/全局变量也能稍微方便点。


/* 禁止 */
.cursor_not_allow{
  cursor: url(/src/assets/cursor/KUDACursorsSet/notAllow),pointer !important;
}
/* 移动 */
.cursor_move{
  cursor: url(/src/assets/cursor/KUDACursorsSet/move),pointer !important;
}
/* 左上角拖拽 */
.cursor_resize_left_top{
  cursor: url(/src/assets/cursor/KUDACursorsSet/resizeLeftTop),pointer !important;
}



鼠标指针集合


以下是cursor支持的所有鼠标样式：


类型

CSS 值

描述

General

auto

浏览器根据当前内容决定指针样式
例如当内容是文字时使用 text 样式

default

默认指针，通常是箭头。

none

无指针被渲染

链接及状态

context-menu

指针下有可用内容目录。

help

指示帮助

pointer

悬浮于连接上时，通常为手

progress

程序后台繁忙，用户仍可交互 (与wait 相反).

wait

程序繁忙，用户不可交互 (与progress 相反).图标一般为沙漏或者表。

选择

cell

指示单元格可被选中

crosshair

交叉指针，通常指示位图中的框选

text

指示文字可被选中

vertical-text

指示垂直文字可被选中

拖拽

alias

复制或快捷方式将要被创建

copy

指示可复制

move

被悬浮的物体可被移动

no-drop

当前位置不能扔下
Firefox bug 275173Windows 或 Mac OS X 中 "no-drop 与 not-allowed 相同".

not-allowed

不能执行

grab

可抓取

译者注:grab 和 grabbing 在比较后期才被支持，见浏览器兼容表

grabbing

抓取中

重设大小及滚动

all-scroll

元素可任意方向滚动（平移）.
Firefox bug 275174Windows 中，"all-scroll 与 move 相同".

col-resize

元素可被重设宽度。通常被渲染为中间有一条竖线分割的左右两个箭头

row-resize

元素可被重设高度。通常被渲染为中间有一条横线分割的上下两个箭头

n-resize

某条边将被移动。例如元素盒的东南角被移动时使用 se-resize

e-resize

s-resize

w-resize

ne-resize

nw-resize

se-resize

sw-resize

ew-resize

指示双向重新设置大小

ns-resize

nesw-resize

nwse-resize

缩放

zoom-in

指示可被放大或缩小

zoom-out

?

相关推荐

vue怎么和后端php配合

Vue和后端PHP可以通过HTTP请求进行配合。首先，前端Vue可以使用axios库或者Vue自带的$http对象来发送HTTP请求到后端PHP接口。通过axios库发送POST、GET、PUT等请求...

Ansible最佳实践之 AWX 使用 Ansible 与 API 通信

#头条创作挑战赛#API简单介绍红帽AWX提供了一个类似Swagger的RESTful风格的Web服务框架，可以和awx直接交互。使管理员和开发人员能够在webUI之外控制其...

PHP8.3 错误处理革命:Exception 与 Error 全面升级

亲爱的小伙伴，好久没有发布信息了，最近学习了一下PHP8.3的升级，都有哪些优化和提升，把学到的分享出来给需要的小伙伴充下电。技术段位：高可用性必修目标收益：精准错误定位+异常链路追踪适配场景...

使用 mix/vega + mix/db 进行现代化的原生 PHP 开发

最近几年在javascript、golang生态中游走，发现很多npm、gomod的优点。最近回过头开发MixPHPV3，发现composer其实一直都是一个非常优秀的工具，但是...

15 个非常好用的 JSON 工具

JSON（JavaScriptObjectNotation）是一种流行的数据交换格式，已经成为许多应用程序中常用的标准。无论您是开发Web应用程序，构建API，还是处理数据，使用JSON工具可以大...

php8环境原生实现rpc

大数据分布式架构盛行时代的程序员面试，常常遇到分布式架构，RPC,本文的主角是RPC,英文名为RemoteProcedureCall，翻译过来为“远程过程调用”。主流的平台中都支持各种远程调用技术...

「PHP编程」如何搭建私有Composer包仓库?

在前一篇文章「PHP编程」如何制作自己的Composer包？中，我们已经介绍了如何制作自己的composer包，以及如何使用composer安装自己制作的composer包。不过，这其中有...

WAF-Bypass之SQL注入绕过思路总结

过WAF（针对云WAF）寻找真实IP（源站）绕过如果流量都没有经过WAF，WAF当然无法拦截攻击请求。当前多数云WAF架构，例如百度云加速、阿里云盾等，通过更改DNS解析，把流量引入WAF集群，流量经...

【推荐】一款 IDEA 必备的 JSON 处理工具插件 — Json Assistant

JsonAssistant是基于IntelliJIDEs的JSON工具插件，让JSON处理变得更轻松！主要功能完全支持JSON5JSON窗口（多选项卡）选项卡更名移动至主编辑器用...

技术分享 | 利用PHAR协议进行PHP反序列化攻击

PHAR(“PhpARchive”)是PHP中的打包文件，相当于Java中的JAR文件，在php5.3或者更高的版本中默认开启。PHAR文件缺省状态是只读的，当我们要创建一个Phar文件需要修改...

php进阶到架构之swoole系列教程(一)windows安装swoole

目录概述安装Cygwin安装swoolephp7进阶到架构师相关阅读概述这是关于php进阶到架构之swoole系列学习课程：第一节：windows安装swoole学习目标：在Windows环境将搭建s...

go 和 php 性能如何进行对比?

PHP性能很差吗？每次讲到PHP和其他语言间的性能对比，似乎都会发现这样一个声音：单纯的性能对比没有意义，主要瓶颈首先是数据库，其次是业务代码等等。好像PHP的性能真的不能单独拿出来讨论似的。但其实一...

Linux(CentOS )手动搭建LNMP(Linux+Nginx+Mysql+PHP)坏境

CentOS搭建LNMP（Linux+Nginx+Mysql+PHP）坏境由于网上各种版本新旧不一，而且Linux版本也不尽相同，所以自己写一遍根据官网的提示自己手动搭建过程。看官方文档很重要，永远...

json和jsonp区别

JSON和JSONP虽然只有一个字母的差别,但其实他们根本不是一回事儿：JSON是一种数据交换格式,而JSONP是一种非官方跨域数据交互协议。一个是描述信息的格式,一个是信息传递的约定方法。一、...

web后端正确的返回JSON

在web开发中，前端和后端发生数据交换传输现在最常见的形式就是异步ajax交互，一般返回给js都是json，如何才是正确的返回呢？前端代码想要获取JSON数据代码如下：$.get('/user-inf...

一周热门
最近发表
标签列表