当用户将鼠标悬停在列表项上时，如何将光标变为手形？
我有一个列表，并且我有一个用于其项目的点击处理程序：
<ul>
<li>foo</li>
<li>goo</li>
</ul>
如何将鼠标指针更改为手形指针（例如悬停在按钮上时）？现在，当我将鼠标悬停在列表项上时，指针变成了文本选择指针。
cursor: grab
正如人们所提到的，随着时间的推移，您现在可以安全地使用：
li { cursor: pointer; }
用于 li：
li:hover {
cursor: pointer;
}
在运行代码片段选项后查看更多带有示例的游标属性：
https://i.stack.imgur.com/gJYJv.gif
.auto { 光标：自动； } .default { 光标：默认； } .none { 光标：无； } .context-menu { 光标：上下文菜单； } .help { 光标：帮助； } .pointer { 光标：指针； } .progress { 光标：进度； } .wait { 光标：等待； } .cell { 光标：单元格； } .crosshair { 光标：十字准线； } .text { 光标：文本； } .vertical-text { 光标：垂直文本； } .alias { 光标：别名； } .copy { 光标：复制； } .move { 光标：移动； } .no-drop { cursor: no-drop; } .not-allowed { 游标：不允许； } .all-scroll { 光标：全滚动； } .col-resize { 光标：col-resize; } .row-resize { 光标：行调整大小； } .n-resize { 光标：n-resize; } .e-resize { 光标：e-resize; } .s-resize { 光标：s-resize; } .w-resize { 光标：w-resize; } .ns-resize { 光标：ns-resize; } .ew-resize { 光标：ew-resize; } .ne-resize { 光标：ne-resize; } .nw-resize { 光标：nw-resize; } .se-resize { 光标：se-resize; } .sw-resize { 光标：sw-resize; } .nesw-resize { 光标：nesw-resize; } .nwse-resize { 光标：nwse-resize; } .cursors > div { 浮动：左； box-sizing：边框框；背景：#f2f2f2；边框：1px 实心#ccc；宽度：20%；填充：10px 2px；文本对齐：居中；空白：nowrap； &:nth-child(even) { 背景：#eee; } &:hover { opacity: 0.25 } }
光标示例
您不需要 jQuery，只需使用以下 CSS 内容：
li {cursor: pointer}
瞧！便利。
利用：
li:hover {
cursor: pointer;
}
可以查看当前 HTML 规范的其他有效值（hand 是 not）here。
:hover 伪类的用途是什么。当鼠标 not 悬停元素时，指定不同的光标有什么好处吗？我还读到 li:hover 在 IE6 中不起作用。
:hover 只是为了具体，@Robert。我无法测试任何版本的 MSIE 的支持，抱歉，如果它不起作用，我不会感到惊讶！ :P
hand 在最佳答案中，即使它不起作用？
cursor: hand 已弃用，不在 css 规范中。就像从ie5-6时代开始的。仅使用 pointer。
利用
cursor: pointer;
cursor: hand;
如果你想要一个跨浏览器的结果！
cursor: hand 现在基本上已经过时了。自 IE 5.5 以来就没有出现过。
CSS：
.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; }
您还可以将光标设置为图像：
.img-cur {
cursor: url(images/cursor.png), auto;
}
我认为仅在 JavaScript 可用时才显示手形/指针光标会很聪明。所以人们不会觉得他们可以点击不可点击的东西。
为此，您可以使用 JavaScript 库 jQuery 将 CSS 添加到元素中，如下所示
$("li").css({"cursor":"pointer"});
或者将其直接链接到点击处理程序。
或者当 modernizer 与 <html class="no-js"> 结合使用时，CSS 将如下所示：
.js li { cursor: pointer; }
li:hover {cursor: hand; cursor: pointer;}
只是为了完整性：
cursor: -webkit-grab;
它还提供了帮助，即您在移动图像视图时所知道的。
如果您想使用 jQuery 和 mousedown emulate grab behavior，这将非常有用。
https://i.stack.imgur.com/y5uG4.gif
对于完整的跨浏览器，请使用：
cursor: pointer;
cursor: hand;
为了能够使任何东西获得“鼠标更改”处理，您可以添加一个 CSS 类：
.mousechange:hover { 光标：指针； } 这里有一些文字
我不会说使用 cursor:hand，因为它仅适用于 Internet Explorer 5.5 及更低版本，并且 Internet Explorer 6 随 Windows XP (2002) 一起提供。当他们的浏览器停止为他们工作时，人们只会得到升级的提示。此外，在 Visual Studio 中，它将为该条目添加红色下划线。它告诉我：
验证 (CSS 3.0)：“手”不是“光标”属性的有效值
只需执行以下操作：
li {
cursor: pointer;
}
我将其应用于您的代码以查看其工作原理：
li { 光标：指针； }
- foo
- goo
注意：也不要忘记您可以拥有任何带有自定义光标的手形光标，您可以创建喜欢的手形图标，例如：
div {显示：块；宽度：400px；高度：400px；背景：红色；光标：网址（http://findicons.com/files/icons/1840/free_style/128/hand.png）4 12，自动； }
您可以在悬停时更改它，也可以只在列表项上指定 cursor:pointer，两者都可以。
ul li {
cursor: pointer;
}
或者
ul li:hover {
cursor: pointer;
}
ul li:hover{
cursor: pointer;
}
所有其他响应都建议使用标准 CSS 指针，但是，有两种方法：
应用 CSS 属性 cursor:pointer;到元素。 （这是光标悬停在按钮上时的默认样式。）应用 CSS 属性 cursor:url(pointer.png);为您的指针使用自定义图形。如果您想确保所有平台上的用户体验都相同（而不是让浏览器/操作系统决定您的指针光标应该是什么样子），这可能更可取。请注意，如果找不到图像，可以添加后备选项，包括辅助 url 或任何其他选项，即 cursor:url(pointer.png,fallback.png,pointer);
当然，这些可以以 li{cursor:pointer;} 的方式应用于列表项，作为类 .class{cursor:pointer;}，或作为每个元素的样式属性的值 style="cursor:pointer;"。
利用：
ul li:hover{
cursor: pointer;
}
有关更多鼠标事件，请检查 CSS cursor property。
简单地说一下这段代码。
li{cursor: pointer;}
您可以使用以下方法之一：
li:hover
{
cursor: pointer;
}
或者
li
{
cursor: pointer;
}
工作示例1：
li:hover { 光标：指针； }
- foo
- bar
工作示例2：
li { 光标：指针； }
- foo
- bar
使用 HTML Hack
注意：不建议这样做，因为它被认为是不好的做法
将内容包装在包含 href 属性的锚标记中将起作用，而无需显式应用具有锚属性副作用的 cursor: pointer; 属性（用 CSS 进行了修改）：
您可以使用以下代码：
li:hover { cursor: pointer; }
对于基本手形符号：
尝试
cursor: pointer
如果您想要一个手形符号，例如拖放某个项目并放下它，请尝试：
cursor: grab
您还可以使用以下样式：
li {
cursor: grabbing;
}
检查以下内容。我从 W3Schools 得到它。
.alias { 光标：别名； } .all-scroll { 光标：全滚动； } .auto { 光标：自动； } .cell { 光标：单元格； } .context-menu { 光标：上下文菜单； } .col-resize { 光标：col-resize; } .copy { 光标：复制； } .crosshair { 光标：十字准线； } .default { 光标：默认； } .e-resize { 光标：e-resize; } .ew-resize { 光标：ew-resize; } .grab { 光标：-webkit-grab;光标：抓取； } .grabbing { 光标：-webkit-grabbing;光标：抓取； } .help { 光标：帮助； } .move { 光标：移动； } .n-resize { 光标：n-resize; } .ne-resize { 光标：ne-resize; } .nesw-resize { 光标：nesw-resize; } .ns-resize { 光标：ns-resize; } .nw-resize { 光标：nw-resize; } .nwse-resize { 光标：nwse-resize; } .no-drop { cursor: no-drop; } .none { 光标：无； } .not-allowed { 游标：不允许； } .pointer { 光标：指针； } .progress { 光标：进度； } .row-resize { 光标：行调整大小； } .s-resize { 光标：s-resize; } .se-resize { 光标：se-resize; } .sw-resize { 光标：sw-resize; } .text { 光标：文本； } .url { 光标：url（myBall.cur），自动； } .w-resize { 光标：w-resize; } .wait { 光标：等待； } .zoom-in { 光标：放大； } .zoom-out { 光标：缩小； }
光标属性
鼠标悬停在文字上可以改变鼠标光标。
别名
p>全滚动
自动
单元格
col-resize
复制
十字准线
默认
e-resize
ew-resize
抓取
抓取
帮助
移动
n-resize
ne-resize
nesw-调整大小
ns-resize
nw-resize
nwse -resize
no-drop
none
not-allowed< /p>
指针
进度
行调整大小
s-resize
se-resize
sw-resize
文本
url
w-resize
等待
放大
缩小
只需使用 CSS 设置自定义光标指针
/* Keyword value */
cursor: pointer;
cursor: auto;
/* URL, with a keyword fallback */
cursor: url(hand.cur), pointer;
/* URL and coordinates, with a keyword fallback */
cursor: url(cursor1.png) 4 12, auto;
cursor: url(cursor2.png) 2 2, pointer;
/* Global values */
cursor: inherit;
cursor: initial;
cursor: unset;
/* 2 URLs and coordinates, with a keyword fallback */
cursor: url(one.svg) 2 2, url(two.svg) 5 5, progress;
演示
注意：光标支持多种格式图标！
例如 .cur, .png, .svg, .jpeg, .webp 等
li:hover{ cursor: url("https://cdn.xgqfrms.xyz/cursor/mouse.cur"), 指针；颜色：#0f0；背景：#000； } /* li:hover{ 光标: url("../icons/hand.cur"), 指针; } */ li{ 高度：30px;宽度：100px；背景：#ccc；颜色：#fff;边距：10px；文本对齐：居中；列表样式：无； }
- a
- b
- c
参考
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
<style>
.para{
color: black;
}
.para:hover{
cursor: pointer;
color: blue;
}
</style>
<div class="para">
在上面的 HTML 代码中，[:hover] 用于指示以下样式必须仅应用于悬停或保持鼠标光标在其上。
CSS 中有几种类型的游标可用：
查看以下光标类型的代码：
<style>
.alias {cursor: alias;}
.all-scroll {cursor: all-scroll;}
.auto {cursor: auto;}
.cell {cursor: cell;}
.context-menu {cursor: context-menu;}
.col-resize {cursor: col-resize;}
.copy {cursor: copy;}
.crosshair {cursor: crosshair;}
.default {cursor: default;}
.e-resize {cursor: e-resize;}
.ew-resize {cursor: ew-resize;}
.grab {cursor: -webkit-grab; cursor: grab;}
.grabbing {cursor: -webkit-grabbing; cursor: grabbing;}
.help {cursor: help;}
.move {cursor: move;}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nesw-resize {cursor: nesw-resize;}
.ns-resize {cursor: ns-resize;}
.nw-resize {cursor: nw-resize;}
.nwse-resize {cursor: nwse-resize;}
.no-drop {cursor: no-drop;}
.none {cursor: none;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
.progress {cursor: progress;}
.row-resize {cursor: row-resize;}
.s-resize {cursor: s-resize;}
.se-resize {cursor: se-resize;}
.sw-resize {cursor: sw-resize;}
.text {cursor: text;}
.url {cursor: url(myBall.cur),auto;}
.w-resize {cursor: w-resize;}
.wait {cursor: wait;}
.zoom-in {cursor: zoom-in;}
.zoom-out {cursor: zoom-out;}
</style>
单击下面的链接以查看 cursor 属性的作用：
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor
关注公众号
不定期副业成功案例分享
cursor: pointer就足够了：quirksmode.org/css/cursor.htmlpointer这个问题已经超过 5 年的新方法。cursor:pointer仍然有效。因此，如果曾经有使用cursor:hand的借口，那么现在就没有了。