CSS `cursor` 属性和 `url` 值的用法详解

最新推荐文章于 2024-02-21 14:37:32 发布

CbrFullstack

最新推荐文章于 2024-02-21 14:37:32 发布

阅读量495

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/CbrFullstack/article/details/133455423

版权

html 专栏收录该内容

57 篇文章 ¥59.90 ¥99.00

订阅专栏

本文详细介绍了CSS中的cursor属性，特别是如何利用url值创建自定义鼠标指针。内容涵盖不同cursor值的用法，包括示例代码，展示了如何为元素设置手型、文本选择器等多样化指针样式，强调了自定义鼠标指针的图片引用路径选择对可用性和可访问性的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS 中的 cursor 属性用于定义鼠标指针在元素上的样式。通过指定不同的值，我们可以改变指针的外观，例如将其变为手型、箭头、文本选择器等。cursor 属性可接受多种值，其中包括 url 值，它允许我们自定义鼠标指针的外观，使用自定义的图片。

下面是一些关于 cursor 属性和 url 值的详细说明，以及相应的源代码示例：

<!DOCTYPE html>
<html>
<head

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

CbrFullstack

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

CSS Position定位（详解网页中的定位属性）

百赢出品，必属精品

04-25

2106

文档流（Document Flow）：HTML元素默认按照文档流从上到下依次排列，形成页面布局。定位：定位是指通过CSS将元素摆放到指定位置的技术，不受文档流的限制。定位属性（position）用于指定元素的定位方式，可选值包括相对定位（relative）、绝对定位（absolute）、固定定位（fixed）和粘性定位（sticky）。相对定位（Relative Positioning）元素相对于其正常位置进行定位，通过设置top、right、bottom和left属性进行偏移。

CSS技巧篇（二）：使用自定义的鼠标图标 --- cursor url

weixin_46513664的博客

03-09

1354

css cursor url的用法格式： css:{cursor:url(“图标路径”),auot}; //IE，FF，chrome浏览器都可以示例代码： **解析：**前面的url是自定义鼠标图标的路径，可以为相对/绝对路径。第二个参数是css标准的cursor样式。可换成其他属性（如pointer/default/等） **注意：**w3school推荐第二个参数必须定义一个普通的光标，...

参与评论您还未登录，请先登录后发表或查看评论

css中url用法,css cursor url用法格式详解

weixin_35896668的博客

08-03

2880

css cursor url用法格式：css:{cursor:url('图标路径'),auto;} //IE,FF,chrome浏览器都可以实例代码：html{cursor: url("http://ued.taobao.com/blog/wp-content/themes/taobaoued/images/cursor.ico"),auto;}解析：前面的url是自定义鼠标图标路径，第2个参数a...

css cursor: url 自定义鼠标光标遇到的坑

冰雪为融的博客

04-24

4279

1、大小不能大于32*32（切记）本人就是在这个上面栽了很久，一直出不来 2、最好是 ico，cur格式 3、使用绝对路径 4、在逗号后面加通用游标，如官网所写示例： map.style.cursor = "url('/img/cursor.ico'), pointer"; 附：在线修改图片大小网址：在线图片大小修改器，图片尺寸修改，格式转换【免费】 png等格式转ico:PNG转ICO - 在线转换图标文件 ...

CSS中URL路径

weixin_30765505的博客

04-06

928

项目中，为a标签添加背景，老是没效果（VS2013中相关文件的位置：CSS文件位于/Content中，图片位于/images中）为a标签添加背景的CSS代码为：background: url(images/sort.png) no-repeat 0 3px; 一直没有效果，后来才发现是绝对路径，相对路径搞错了。url(images/sort.png)表示的是当前文件夹下的images文件...

css中cursor属性详解PDF

最新发布

01-15

CSS cursor鼠标样式大比拼，鼠标样式详细介绍

我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。

07-12

1270

除了可以使用上表中介绍的光标样式外，您也可以使用图像文件来自定义光标的样式，如下所示：您可以使用 url() 定义多个光标的样式文件，每个 url() 之间使用逗号分隔，上面示例中 custom.gif、custom.cur 就是自定义的光标文件。需要注意的是，在自定义光标样式时，要在最后定义一个上表中的通用光标样式，防止使用 url() 中定义的光标图像资源失效。提示：.cur 格式是光标文件的标准格式，您可以使用一些在线工具（例如）将 .jpg、.gif 等格式的图像文件转换为 .cur 格式。

鼠标特效css的cursor属性

03-28

### 鼠标特效CSS的Cursor属性详解在网页设计与开发中，为了提升用户体验以及增强网站的互动性，开发者经常需要对网站进行各种细节优化。其中，利用CSS中的`cursor`属性来改变鼠标指针样式就是一种常见的优化手段。...

利用css的cursor属性改变鼠标的样式

weixin_30600503的博客

12-05

228

利用css的cursor属性改变鼠标的样式 css cursor url用法格式：css:{cursor:url('图标路径'),auto;} //IE,FF,chrome浏览器都可以实例代码：html{cursor: url("http://ued.taobao.com/blog/wp-content/themes/taobaoued/i...

css中url的路径含义及使用

09-25

在CSS中有用url语法来指定background-image或是其他引用文件中

鼠标cursor属性和如何使用cursor的url属性

lianmindiandi

07-03

4462

下面介绍cursor的一些属性: 值描述 url 需被使用的自定义光标的URL default 默认光标（通常是一个箭头） crosshair 光标呈现为十字线 pointer 光标呈现为指示链接的指针（一只手） move 此光标指示某对象可被移动 e-resize 此光标指示矩形框的边缘可被向右（东）移动 ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东） nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西） n-re

CSS中的URL_CSS中的URI

歪脖先生的博客

11-29

2229

URI是Uniform Resource Identifier的缩写，表示统一资源标识符，是一个用于标识某一互联网资源名称的字符串。该种标识允许用户对任何（包括本地和互联网）的资源通过特定的协议进行交互操作。URI由包括确定语法和相关协议的方案所定义。 Web上可用的每种资源，如HTML文档、图像、视频片段、程序等，都由一个通用资源标识符进行定位。在CSS属性中，使用功能符号 url

CSS3 cursor

xiaopihaierletian的博客

03-06

1382

光标类型 CSS 十字准心 cursor: crosshair; 手 cursor: pointer; cursor: hand; 写两个是为了照顾IE5，它只认hand。等待/沙漏 cursor: wait; 帮助 cursor: help; 无法释放 cursor: no-drop; 文字/编辑 cursor: text; 可移动对象 cursor: move; 向上

css url,简单介绍CSS中的URL工具

weixin_35980011的博客

08-03

819

有许多原因使得你需要在CSS代码中系统性的替代URL：将其转换为数据URI、将其指向一个CDN、将其文件名替换为自动生成的文件名，等等。这个工具能够帮你从给定的CSS代码中将URL解析出来，并允许你将其替换为你选择的任意值。替换后的CSS代码与源代码完全相同，除了URL已经根据你的选择进行了替换。这个库包含诸多工具，能够帮助你操作和更改CSS URL。CSS URL重写器(Rewriter)CSS...

cursor url cur

闲谈

12-25

223

when you want to use custom image cursor , you must promise the format of the image is 'cur' , or ie do not act as what it should be. There is a good tool for transfer the format of the image t...

CSS - cursor 使用

Muge

10-27

823

cursor 可接受图片, 如: name:hover { cursor: url(images/i.png), auto} W3C推荐第二个参数设置为auto, 以防止不可有时有备用鼠标指针.IE支持cur,ani,ico这三种格式， Firefox支持bmp,gif,jpg,cur,ico这几种格式，不支持ani格式，也不支持gif动画格式，因此来说一般将url引用的图片存为ico或cur格

CSS 函数详解url、min、rgb、blur、scale、rotate、translate等

weixin_50367873的博客

02-21

1742

CSS 函数详解url、min、rgb、blur、rotate、translate

使用自定义的鼠标图标 --- cursor url

weixin_33949359的博客

02-24

702

前段时间在项目中遇到过自定义鼠标图标这一需求。由于一般我们用的鼠标样式大都是固定的几种，而自定义鼠标图标不是很常用到，所以对这一小知识点进行总结，以防忘记。自定义鼠标图标自定义鼠标图标即 css cursor url的使用。 css cursor url的用法格式： css:{cursor:url("图标路径"),auot}...