DigitalOcean 提供适用于您旅程每个阶段的云产品。 立即开始使用 价值 200 美元的免费信用额度!
CSS 中的 cursor
属性控制鼠标指针位于设置此属性的元素上时的外观。 显然,这仅与存在鼠标和指针的浏览器/操作系统相关。 它们本质上用于 UX,传达某些功能的概念。 因此,请尽量不要破坏这种功能。
有很多这样的光标
.auto { cursor: auto; }
.default { cursor: default; }
.none { cursor: none; }
.context-menu { cursor: context-menu; }
.help { cursor: help; }
.pointer { cursor: pointer; }
.progress { cursor: progress; }
.wait { cursor: wait; }
.cell { cursor: cell; }
.crosshair { cursor: crosshair; }
.text { cursor: text; }
.vertical-text { cursor: vertical-text; }
.alias { cursor: alias; }
.copy { cursor: copy; }
.move { cursor: move; }
.no-drop { cursor: no-drop; }
.not-allowed { cursor: not-allowed; }
.all-scroll { cursor: all-scroll; }
.col-resize { cursor: col-resize; }
.row-resize { cursor: row-resize; }
.n-resize { cursor: n-resize; }
.e-resize { cursor: e-resize; }
.s-resize { cursor: s-resize; }
.w-resize { cursor: w-resize; }
.ns-resize { cursor: ns-resize; }
.ew-resize { cursor: ew-resize; }
.ne-resize { cursor: ne-resize; }
.nw-resize { cursor: nw-resize; }
.se-resize { cursor: se-resize; }
.sw-resize { cursor: sw-resize; }
.nesw-resize { cursor: nesw-resize; }
.nwse-resize { cursor: nwse-resize; }
光标也可以是图像
.custom {
/* The second value here is a fallback. */
cursor: url(images/my-cursor.png), auto;
/* You may need coordinates to adjust the pointer
for example, the custom cursor is circular and you want
the middle to be where you click */
cursor: url(target.svg) 15 15, move;
}
一些 WebKit 专用的光标
-webkit-zoom-in
-webkit-zoom-out
-webkit-zoom-grab
-webkit-zoom-grabbing
更多信息
浏览器支持
此浏览器支持数据来自 Caniuse,其中包含更多详细信息。 数字表示浏览器从该版本开始支持该功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
5 | 4 | 9 | 14 | 5 |
移动设备/平板电脑
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 否 | 127 | 否 |
对于较新的值,例如 zoom-in
和 zoom-out
此浏览器支持数据来自 Caniuse,其中包含更多详细信息。 数字表示浏览器从该版本开始支持该功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
4* | 2* | 否 | 12 | 3.1* |
移动设备/平板电脑
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 否 | 127 | 否 |
col-resize 在 Chrome 中不起作用,当我将鼠标悬停在具有“cursor:col-resize”样式的位置时,它就消失了。
我在 Chrome 中看到鼠标悬停时出现了正确的光标。
这里有一个小问题:根据上面链接的 Moz 文档,“not-allowed” 在 IE6 及更高版本中受支持。我只知道,因为我是在寻找一个关于这种光标类型在使用 jQuery 动态添加时未在 IE 中显示的错误修复。
+1
非常感谢 Trav。我简直要疯了,因为光标没有改变。结果发现我和你一样遇到了 jQuery 的问题。
感谢您以这种酷炫的方式呈现光标,现在我有一个地方可以查找正确的光标,以防我忘记了。我一直想要这样的功能。
干杯!
关于仅 Webkit 光标的一个小说明
它们不存在,“zoom”部分需要从这些光标中移除,应该改为
我发现这些光标在构建仅 Webkit 的 Web 应用程序时非常方便 :)
Adam,你如何更改 DOM 元素的光标?我理解 -webkit-grab,但不理解 -grabbing。也许如果我使用 jQuery UI 可拖动,我需要处理“ondrag”事件?或者在“start”和“end”事件中更改类?谢谢!
不,他的意思是没有
cursor:-webkit-zoom-grab
,如上所示。它应该是-webkit-grab
有人知道如何让光标成为实际的文本吗?我已经使用 jQuery 和一个跟踪光标位置的 div 实现了这一点 - 唯一的问题是,光标无法点击/悬停任何东西,因为该 div 阻塞了它下面的所有内容。有什么想法吗?
谢谢!
@joss; 你太棒了!
我做了一个 CodePen,其中我使用 data:uri 内联添加自定义光标:http://codepen.io/netsi1964/full/DsAhE
谢谢!这个小参考太方便了,省去了我很多麻烦!
这是我见过的最好的光标教程之一 - 向 Chris 致敬
你能给我一个在 IE 中使用 zoom-in 和 zoom-out 的示例吗?因为它们确实有效,而且我还没有在这里看到任何使用它们的示例。
演示?
如果我使用 CSS 在光标移到 div 上时更改光标图像,它可以使用笑脸,但不能使用具有相同图像属性的自建图像(也是一个颜色减少的 gif)……我看不出区别……为什么来自网络的笑脸可以工作,而我的图像却不行?
@Ann 我做了一个 CodePen,我在里面尝试了自定义光标。请注意,它通常不受支持。 使用 data-uri 的自定义光标
有人知道
wait
和progress
之间的区别吗?在 Safari 中它们看起来一样。纯粹是语义上的区别吗?在 Windows 上
“progress” = 光标 + 旋转圆圈 = (您可以使用页面,但它很忙)
“wait” = 仅旋转圆圈 = (您无法使用页面)
我使用提供的代码创建了一个自定义光标图像,但在前端,光标有一个非常细的黑色轮廓……有没有办法将其移除?
我也尝试使用上面显示的 CSS 代码添加我的自定义图像光标。什么也没出现。有 -webkit-moz-o 要求吗?
谢谢。
大家好,
有人遇到过自定义光标放大的情况吗?就像它被极度放大一样?
任何帮助都将不胜感激!
谢谢!
谢谢!
谢谢 :)
我想使用光标作为图像。我写下了 URL,但它不起作用。然后我看到了您的文章,我的问题解决了。谢谢,哥们。
光标:not-allowed 在 Mac 上的 IE5 中有效。
默认光标在 Mozilla 30 中有效。谢谢!很棒……
需要注意的是,它在伪元素上不起作用。
是的,这个教程非常有用。
有人知道 auto 和 default 之间的区别吗?谢谢。
default 强制光标变为你在大多数普通使用中看到的箭头。
Auto 是在正常使用情况下发生的情况。它允许操作系统(或其他人)控制光标的外观,并根据上下文发生变化,就像通常那样。
他们只是遗漏/忘记了将 CSS 添加到上面的 default 演示中,因此它表现得像 auto。
小问题:default div 没有应用“cursor: default”样式,因此当您将鼠标悬停在文本上时,光标会更改为文本光标类型。当 cursor: default 应用于元素时,它应该始终是默认的箭头光标。
如果您想在演示中看到每个光标,这里有一个 jsfiddle
http://jsfiddle.net/ewhb866y/1/
非常有用的教程。谢谢。
有没有办法延迟加载光标图像?
有没有办法延迟加载光标图像?
好吧,你错过了一个光标名称“grab”。
$("tbody tr").css("cursor", "grab");
在 Chrome 中 cursor:grab 不起作用。
使用 cursor:-webkit-drag
谢谢你的信息!这是否仍然适用于 OSX Yosemite?我似乎无法让 cursor: pointer;(手形)再起作用了。
提前感谢。
嗨,我实现了自定义光标,例如
当我使用 http 访问我的页面时,它工作正常,但当我使用 https 访问我的页面时,它就不起作用了。它只显示默认光标。我正在将我的页面从 http 重定向到 https。我的 IE10 和 Windows。我也尝试过提供绝对 URL,但没有用。请有人帮我一下。
如果光标可以通过 CSS 设置,那会很酷/很有趣。例如,通过设置内容“Read more”+ 字体、背景和颜色等。
:)
谢谢,这很有帮助。
这确实非常有效,让我对 CSS 中的光标有了更多了解。
你能帮我一下吗,我想要手形指针。
嗨 Yahya
看看这个使用 data-uri 的自定义光标,它展示了如何创建自定义光标。
你可以在 css 类中使用 (cursor:pointer;)
嗨。我是一名九年级的学生,我一直试图用 html 中的图片定制我的光标,但它拒绝工作。有人可以帮忙吗?
你能发布你的代码吗?
在我的网页中,所有光标类型在一段时间后都会变为默认。有人知道为什么吗?
安东尼先生,您对如何使图标渲染有任何建议吗?我还在开发网站。
任何帮助将不胜感激,谢谢
我建议您使用相对路径而不是绝对路径,
所以如果您将 HTML 文档放在与 .ico 文件相同的文件夹中。
试试
body {
cursor: url('Antivirus.ico'), default;
}
不幸的是,这在我的任何浏览器中似乎都不起作用;我使用 Windows 8.1,并使用 Google Chrome、Firefox 和默认的 IE 作为我使用的某些可能的浏览器。我尝试了所有方法,但没有一个成功渲染图标。
如果我在某个地方丢失了它,请随时大声喊叫并给我建议。请并谢谢。
/语法/
body {
cursor: url("C:\Users\User\Documents\Notepadd\Antivirus.ico"), default; /我们设置了自定义光标以及默认回退光标/
}
我想在图片悬停时将光标更改为文本,有人知道诀窍吗?
是的!
cursor
属性接受 URL 参数,您可以在其中指定图像。这篇文章中的“自定义”示例显示了语法.custom {
cursor: url(images/my-cursor.png), auto;
}
这里还有另一篇包含一些示例的文章:https://css-tricks.org.cn/using-css-cursors/
我如何使我的光标像这个网站一样大,它太有趣了!!
http://www.louiswalch.com/
谢谢,这很有用!我已经使用这段 CSS 在https://winway.se的英雄视频悬停时显示扬声器图标作为鼠标光标
cursor: url("https://winway.se/wp-content/uploads/2020/09/sound_test-1-e1599744120404.png"), auto;
它在 Chrome 中完美运行,但 Safari 仅显示默认指针。关于出了什么问题有什么建议吗?当我测试 css-tricks.com 上的 PNG 光标示例时,它们在 Safari 中运行良好。
如果您想更改光标图像的偏移量,可以添加坐标,如下所示
(值使用
cursor: [ [<x> <y>]?,]
语法以像素指定。)