html修改鼠标手势,css要怎么设置鼠标手势?

article/2025/7/22 9:12:43

在CSS中,可以使用cursor属性来设置鼠标手势。下面本篇文章就来给大家介绍一下cursor属性。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

351e04d76b27c6389d6fe31be11b2dfe.png

cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。有时我们需要动态的变化光标样式时就需要这个属性。

属性值(手势状态):auto : 默认值。浏览器根据当前情况自动确定鼠标光标类型。

all-scroll : IE6.0 有上下左右四个箭头,中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。

col-resize : IE6.0 有左右两个箭头,中间由竖线分隔开的光标。用于标示项目或标题栏可以被水平改变尺寸。

crosshair : 简单的十字线光标。

default : 客户端平台的默认光标。通常是一个箭头。

hand : 竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。

move : 十字箭头光标。用于标示对象可被移动。

help : 带有问号标记的箭头。用于标示有帮助信息存在。

no-drop : IE6.0 带有一个被斜线贯穿的圆圈的手形光标。用于标示被拖起的对象不允许在光标的当前位置被放下。

not-allowed : IE6.0 禁止标记(一个被斜线贯穿的圆圈)光标。用于标示请求的操作不允许被执行。

pointer : IE6.0 和 hand 一样。竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。

progress : IE6.0 带有沙漏标记的箭头光标。用于标示一个进程正在后台运行。

row-resize : IE6.0 有上下两个箭头,中间由横线分隔开的光标。用于标示项目或标题栏可以被垂直改变尺寸。

text : 用于标示可编辑的水平文本的光标。通常是大写字母 I 的形状。

vertical-text : IE6.0 用于标示可编辑的垂直文本的光标。通常是大写字母 I 旋转90度的形状。

wait : 用于标示程序忙用户需要等待的光标。通常是沙漏或手表的形状。

*-resize : 用于标示对象可被改变尺寸方向的箭头光标。w-resize | s-resize | n-resize | e-resize | ne-resize | sw-resize | se-resize | nw-resize

url ( url ) : IE6.0 用户自定义光标。使用绝对或相对 url 地址指定光标文件(后缀为 .cur 或者 .ani )。

演示

总体测试代码

cursor样式演示

.cursorDiv{

width: 300px;

height:150px;

background: #FF6600;

border:solid 1px;

cursor:url('img/sanchaji.png'),pointer;

}

Jquery操作$(".cursorDiv").css({"cursor":"progress",})

1.cursor:url()

可以将光标图形自定义为自己喜欢的图标样式,url()里是一个图标的连接,可以是png、ico、gif等,注意,要在url()后面定义一个普通的光标,否则自定义的图标不起作用!cursor:url('img/sanchaji.png'),pointer;

结果样式

c344589f5641f1c50f916416c6864589.png

2.cursor:default

默认光标(通常是一个箭头)cursor:default;

结果样式

4cfb8aee2b13671582d63e9221f7a4bb.png

3.cursor:auto

默认。浏览器设置的光标。cursor:auto;

结果样式

b1c2ef6ef0d5f172d9b78eafa41f69d9.png

4.cursor:crosshair

光标呈现为十字线。cursor:crosshair;

结果样式

739ec45d517125145a8381aecd8e7590.png

5.cursor:pointer

光标呈现为指示链接的指针(一只手)cursor:pointer;

结果样式

bb15c18e2ee6f30df9e381b443765be4.png

6.cursor:move

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

结果样式

530b02a53690aa4467389ed0b4f1eade.png

7.cursor:e-resize

此光标指示矩形框的边缘可被向右(东)移动。cursor:e-resize;

结果样式

9e7fa0be8ba73b564c4234a7632f7ebe.png

8.cursor:ne-resize

此光标指示矩形框的边缘可被向上及向右移动(北/东)。cursor:ne-resize;

结果样式

7d869001e6c7f3bb8300ba338282a72d.png

9.cursor:nw-resize

此光标指示矩形框的边缘可被向上及向左移动(北/西)。cursor:nw-resize;

结果样式

81082efad9485fd12672448450c305b1.png

10.cursor:n-resize

此光标指示矩形框的边缘可被向上(北)移动。cursor:n-resize;

结果样式

733ee9f5a0a261c6cf0bc5fec2ea0521.png

11.cursor:se-resize

此光标指示矩形框的边缘可被向下及向右移动(南/东)。cursor:se-resize;

结果样式

964377e72c5cf707408838696542aa90.png

12.cursor:sw-resize

此光标指示矩形框的边缘可被向下及向左移动(南/西)。cursor:sw-resize;

结果样式

3d46926fe989f91fb44c8ef8cab4a563.png

13.cursor:s-resize

此光标指示矩形框的边缘可被向下移动(南)。cursor:s-resize;

结果样式

9d7d53928797541ccfacea19081db9e6.png

14.cursor:w-resize

此光标指示矩形框的边缘可被向左移动(西)。cursor:w-resize;

结果样式

0e187fb68a707319db95523a8486f08f.png

15.cursor:text

此光标指示文本。cursor:text;

结果样式

09042a3c1c00ea7ef8db7d3bd3cbb0b2.png

16.cursor:wait

此光标指示程序正忙(通常是一只表或沙漏)。cursor:wait;

结果样式

9e1d8aaf10e3f19be3330843ddc69bb0.png

17.cursor:help

此光标指示可用的帮助(通常是一个问号或一个气球)。cursor:help;

结果样式

e8ec8b48f2379d7a60313cb5f2498f9f.png

18.cursor:progresscursor:progress;

结果样式

5e7d86f2375e872636487d679fbf3211.png

测试浏览器为Chrome

更多web开发知识,请查阅 HTML中文网 !!

文章来源:https://blog.csdn.net/weixin_36306387/article/details/117802206
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://chatgpt.dhexx.cn/article/AGUnXVyH.shtml

相关文章

java 鼠标响应_java小程序中鼠标事件的响应处理

如何在小程序中实现鼠标响应? public class Hello extends Applet implements MouseListener{ public void init(){ addMouseListener(this); } public void mouseEntered(MouseEvent e){ au.play(); setBackground(Color.blue); } public void mouseExited(MouseEv…

html修改鼠标手势,css设置鼠标手势的方法

css设置鼠标手势的方法 相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,下面小编给大家整理了css设置鼠标手势的方法,供大家参阅。 属性名:cursor 属性值…

鼠标拖动生成画框

需求&#xff1a;鼠标按下拖动生成一个画框 注意点&#xff1a; div 的left和top&#xff1a;如果鼠标当前位置>鼠标起始位置&#xff0c;则为鼠标起始位置&#xff08;鼠标往右拉&#xff09;&#xff1b;如果鼠标当前位置<鼠标起始位置&#xff0c;则为鼠标当前位置(…

QT 实现鼠标拖动(drag)和放下(drop)代码(图形操作四)

拖动的对象&#xff1a; #include "outlistitem.h" #include "ui_outlistitem.h"OutListItem::OutListItem(QWidget *parent) :QWidget(parent),ui(new Ui::OutListItem) {ui->setupUi(this); }OutListItem::~OutListItem() {delete ui; }void OutList…

放下鼠标 全键盘定义你的浏览器

在linux上用过vim的朋友相信都被这个编辑器惊艳到了吧, 但是它只是在linux系统中存在而且是在字符操作界面。但是如果将这种可以全键盘的操作搬到windows上这样的图形界面又是怎样令人去感到惊艳呢&#xff1f; 本文介绍的插件是基于谷歌和火狐的&#xff0c;它可以使你在很大的…

外企工作日常:全英文CrossTalk反串讲-讲前紧张,讲后淡定

起因&#xff1a; 在三周之前我接到了一个任务&#xff0c;更准确讲是我自己“作死”主动领取了一个更复杂的任务。这个任务包含了三个相关联的需求。这个需求说简单也简单&#xff0c;说复杂也复杂&#xff5e; 简单在&#xff1a;就是更改一下更新token时间的一个逻辑&am…

linux周六串讲

esc. //粘贴复制上一条命令的参数 cat /etc/resolv.conf //查看DNS地址 route -n //查看网关 hostname //临时修改主机名 hostnamectl set-hostname 名称 //永久修改主机名 ssh root192.168.10.233 //用windows远程的格式&#xff0c;在CMD窗口输入这个命令 …

【Linux】Linux指令串讲

大家好&#xff0c;今天要开启一个新的专题&#xff1a;Linux 今天的内容是指令还有一些基本的Linux知识补充 由于Linux的知识很难明确写出分类&#xff0c;所以目录就不会做的特别详细完全 喜欢的小伙伴点赞收藏一下不迷路哦 目录 1.目录 2.文件 3.路径 1.目录 1.创建目录…

kafka 串讲:架构模型、角色功能梳理

kafka 串讲&#xff1a;架构模型、角色功能梳理 kafka 的 what why how&#xff0c;先有一个粗略宏观的理解 rabbitmq、各种 mq 的技术选型、横向对比 首先&#xff0c;kafka 是一个消息中间件。我们从一个本质的点聊起&#xff0c;我们有一个系统 service&#xff0c;如果这…

【视频理解】论文串讲

视频理解论文串讲 2020-视频理解综述-A Comprehensive Study of Deep Video Action Recognition2014-CVPR-Large-scale Video Classification with Convolutional Neural Networks2014-NIPS-Two-Stream Convolutional Networks for Action Recognition in Videos2015-CVPR-Beyo…

李沐论文精度系列之八:视频理解论文串讲

文章目录 一 、前言二、 DeepVideo&#xff08;IEEE 2014&#xff09;2.1 模型结构2.2 实验结果2.3 总结 三、双流网络及其变体3.1 Two-Stream&#xff08;NeurIPS 2014&#xff09;3.1.1 简介3.1.2 改进工作 3.2 Two stream LSTM&#xff08;CVPR 2015 &#xff09;3.2.1 模型…

【Java】JVM 知识串讲

1. JVM 是什么 JVM 是 Java 虚拟机的简称&#xff0c;我们在下载 Java 运行环境时&#xff08;jre&#xff09;&#xff0c;就已经包含了 JVM 了&#xff0c;JVM 是 Java实现跨平台的最核心的部分&#xff0c;所有的 Java 程序会首先被编译为 .class 的类文件&#xff0c;这种…

视频理解论文串讲——学习笔记

文章目录 DeepVideoTwo-StreamBeyond-short-SmippetsConvolutional FusionTSN C3DI3DNon-localR&#xff08;21&#xff09;DSlowFast Timesformer 本文是对视频理解领域论文串讲的笔记记录。 一篇相关综述&#xff1a;Yi Zhu, Xinyu Li, Chunhui Liu, Mohammadreza Zolfaghari…

CGB2202串讲-java复习

java基础&#xff1a; day01&#xff1a; 1&#xff1a;java的开发环境&#xff1a; 编译器&#xff1a;.java源文件&#xff0c;编译成.class的字节码文件 运行期&#xff1a;jvm加载并运行.class字节码文件 2&#xff1a;名词解释&#xff1a; jvm&#xff1a; 加载并运行.cl…

我的论文串讲「一」

文章目录 [Done]2022-arXiv-It’s DONE Direct ONE-shot learning without training optimizationAbstractIntroductionRelated workMethodologyImplementation and DatasetResults and Discussion [Phase]2021-SPIE-Deep neural networks to improve the dynamic range of Zer…

多模态串讲(上)

多模态的学习在最近几年异常火爆&#xff0c;除了普通的多模态学习&#xff0c;比如视觉问答&#xff0c;图文检索等,其实之前讲的所有这种Language Guided Detection&#xff0c;或者Language Guided Segmentation&#xff0c;这些任务都是多模态的&#xff0c;还有最近火的文…

C++【引用】——串讲

【引用】——串讲&#xff08;视频89-94&#xff09; Note: i.视频为黑马程序员C视频&#xff0c;系列文章为视频听课笔记; ii.引用不仅包含定义及简单应用&#xff0c;在类与对象…中也有涉及&#xff1b; iii.难度指数&#xff1a; iv.不论变量、函数名、标识符形式怎样复杂…

CLIP 改进工作串讲(下)

CLIP 改进工作串讲&#xff08;下&#xff09; 本文为 CLIP 改进工作串讲&#xff08;下&#xff09;【论文精读】 的学习笔记。 图像生成 最近一年图像生成领域扩散模型大火&#xff0c;尤其是文本生成图像&#xff0c;DALL-E、imagen 等工作层出不穷&#xff0c;有机会专门…

操作系统串讲

前言 文章内容来源&#xff1a;东北大学的操作系统MOOC视频在操作系统的不同阶段&#xff0c;计算机的工作形式也不同&#xff0c;不要在一开始就将操作系统在心里预设成现代的 windows 或 linux 操作系统&#xff0c;以及将计算机预设成个人电脑等&#xff0c;防止代错对象、…

4.7串讲

4.7串讲 Java基础API 文章目录 4.7串讲 Java基础API字符串字符字符串StringBulider&#xff0c;StringBuffer 内存结构正则表达式字符字符类预定义字符类POSIX字符类&#xff08;仅US-ASCII&#xff09;java.lang.Character 类&#xff08;简单的 java 字符类型&#xff09;Uni…