当用户将鼠标悬停在列表项上时，如何将光标变为手形？

Posted

技术标签:

【中文标题】当用户将鼠标悬停在列表项上时，如何将光标变为手形？【英文标题】：How to change the cursor into a hand when a user hovers over a list item? 【发布时间】：2011-03-06 12:04:40 【问题描述】：

我有一个列表，并且我有一个用于其项目的点击处理程序：

<ul>
  <li>foo</li>
  <li>goo</li>
</ul>

如何将鼠标指针更改为手形指针（例如悬停在按钮上时）？现在，当我将鼠标悬停在列表项上时，指针变为文本选择指针。

【问题讨论】：

仅供参考，我通过删除“jquery”并添加“css”来重新标记您的问题，以更准确地反映您问题的性质和答案。 一个很好的参考列表，用于将光标更改为手形和 css 中可用的其他图标。 javascriptkit.com/dhtmltutors/csscursors.shtml 如果有使用 JavaScript 添加的单击处理程序，则鼠标指针的 css 也应使用 JavaScript 添加。所以用户不认为他或她可以点击不可能的地方。我为此添加了一个适当的answer。 你试过cursor: grab 【参考方案1】：

您不需要 jQuery，只需使用以下 CSS 内容：

li cursor: pointer

瞧！方便。

【讨论】：

方便吗？嗯...我知道你在那里做了什么，@denis-alpheus-cahuk【参考方案2】：

随着时间的推移，正如人们所提到的，您现在可以安全地使用：

li  cursor: pointer;

【讨论】：

值得注意的是，只需执行cursor: pointer 就足以满足 IE 5.5 以上的所有要求：quirksmode.org/css/cursor.html 指针！=光标和手！=指针，这更有趣。 :) 值得注意的是，quirksmode.org/css/user-interface/cursor.html#note（在前面的评论中引用过）声明手必须在 指针之后。我建议只使用指针 - IE 5.5 比 IE 6 更死。 @EdwardBlack 它曾经是不符合标准的奇怪浏览器所必需的，答案是很久以前更新的，以反映新的方式，这只是pointer 这个问题已经超过 5 年了顺便说一句。 确实如此。即使您在 IE5 兼容模式下运行 IE，cursor:pointer 仍然有效。因此，如果曾经有使用 cursor:hand 的借口，那就没有了。【参考方案3】：

使用

cursor: pointer;
cursor: hand;

如果你想要一个跨浏览器的结果！

【讨论】：

现在是 2018 年，跨浏览器开发不再需要 cursor:hand 了吧？【参考方案4】：

对于完整的跨浏览器，使用：

cursor: pointer;
cursor: hand;

【讨论】：

【参考方案5】：

用途：

li:hover 
    cursor: pointer;

当前 HTML 规范的其他有效值（hand不是）可以查看here。

【讨论】：

我不明白在这种情况下:hover 伪类的用途是什么。当鼠标 not 悬停元素时，指定不同的光标有什么好处吗？我还读到li:hover 在 IE6 中不起作用。 我想:hover 只是为了具体，@Robert。我无法测试任何版本的 MSIE 的支持，抱歉，如果它不起作用，我不会感到惊讶！ :P 为什么hand 在最佳答案中，即使它不起作用？ @EdwardBlack cursor: hand 已弃用且不在 css 规范中。就像从ie5-6时代开始的。仅使用pointer。【参考方案6】： 
li:hover cursor: hand; cursor: pointer;

【讨论】：

【参考方案7】：

我认为仅在 JavaScript 可用时才显示手形/指针光标会很聪明。这样人们就不会觉得他们可以点击不可点击的东西。

要实现这一点，您可以使用 JavaScript 库 jQuery 像这样将 CSS 添加到元素中

$("li").css("cursor":"pointer");

或将其直接链接到点击处理程序。

或者当modernizer与&lt;html class="no-js"&gt;结合使用时，CSS看起来像这样：

.js li  cursor: pointer;

【讨论】：

【参考方案8】：

为了能够让任何东西获得“鼠标更改”处理，您可以添加一个 CSS 类：

.mousechange:hover 
  cursor: pointer;

&lt;span class="mousechange"&gt;Some text here&lt;/span&gt;

我不会说要使用 cursor:hand，因为它仅适用于 Internet Explorer 5.5 及更低版本，并且 Internet Explorer 6 随附于 Windows XP (2002)。当他们的浏览器停止为他们工作时，人们只会得到升级的提示。此外，在 Visual Studio 中，它将为该条目添加红色下划线。它告诉我：

验证 (CSS 3.0)：“手”不是“光标”的有效值 属性

【讨论】：

【参考方案9】：

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;

【讨论】：

这不是问题的答案。 这可能不是问题的直接答案，但这是一个非常好的指南。顺便谢谢！【参考方案10】： 
ul li:hover
   cursor: pointer;

【讨论】：

【参考方案11】：

对于基本的手形符号：

试试

cursor: pointer

如果您想要一个手形符号，例如拖放某个项目，请尝试：

cursor: grab

【讨论】：

【参考方案12】：

用途：

ul li:hover
   cursor: pointer;

更多鼠标事件，请查看CSS cursor property。

【讨论】：

重复答案。应该将链接添加为 user3776645 于 2014 年 12 月 21 日发布的另一个答案的编辑。【参考方案13】：

所有其他响应都建议使用标准 CSS 指针，但是，有两种方法：

    将 CSS 属性 cursor:pointer; 应用于元素。 （这是光标悬停在按钮上时的默认样式。）

    使用自定义图形为您的指针应用 CSS 属性 cursor:url(pointer.png);。如果您想确保用户体验在所有平台上都相同（而不是让浏览器/操作系统决定您的指针光标应该是什么样子），这可能更可取。请注意，如果找不到图像，可能会添加后备选项，包括辅助 url 或任何其他选项，即cursor:url(pointer.png,fallback.png,pointer);

当然，这些可以licursor:pointer;，作为类.classcursor:pointer;，或作为每个元素的样式属性值style="cursor:pointer;"，应用于列表项。

【讨论】：

【参考方案14】：

使用 HTML Hack

注意：不建议这样做，因为它被认为是不好的做法

将内容包装在包含href 属性的锚标记中将有效，无需显式应用具有锚属性副作用的cursor: pointer; 属性（用CSS 修改）：

&lt;a href="#" style="text-decoration: initial; color: initial;"&gt;&lt;div&gt;This is bad practice, but it works.&lt;/div&gt;&lt;/a&gt;

【讨论】：

这不起作用。锚标记只有一个带下划线的指针光标，如果它们有一个href，则它们的颜色不同。 "当用户将鼠标悬停在列表项上时，如何使光标成为手？" - 对于这个特定的问题，确实如此。但正如@sandrooco 指出的那样，这不是一个好习惯。【参考方案15】：

只是为了完整性：

cursor: -webkit-grab;

它还提供了一只手，当您移动图像视图时您所知道的那只手。

如果你想使用 jQuery 和 mousedown 来emulate grab behavior，这非常有用。

【讨论】：

【参考方案16】：

用于li：

li:hover 
    cursor: pointer;

在运行 sn -p 选项后查看更多光标属性示例：

.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; 

.cursors > div 
    float: left;
    box-sizing: border-box;
    background: #f2f2f2;
    border:1px solid #ccc;
    width: 20%;
    padding: 10px 2px;
    text-align: center;
    white-space: nowrap;
    &:nth-child(even) 
       background: #eee;
    
    &:hover 
       opacity: 0.25
    

<h1>Example of cursor</h1>

<div class="cursors">
    <div class="auto">auto</div>
    <div class="default">default</div>
    <div class="none">none</div>
    <div class="context-menu">context-menu</div>
    <div class="help">help</div>
    <div class="pointer">pointer</div>
    <div class="progress">progress</div>
    <div class="wait">wait</div>
    <div class="cell">cell</div>
    <div class="crosshair">crosshair</div>
    <div class="text">text</div>
    <div class="vertical-text">vertical-text</div>
    <div class="alias">alias</div>
    <div class="copy">copy</div>
    <div class="move">move</div>
    <div class="no-drop">no-drop</div>
    <div class="not-allowed">not-allowed</div>
    <div class="all-scroll">all-scroll</div>
    <div class="col-resize">col-resize</div>
    <div class="row-resize">row-resize</div>
    <div class="n-resize">n-resize</div>
    <div class="s-resize">s-resize</div>
    <div class="e-resize">e-resize</div>
    <div class="w-resize">w-resize</div>
    <div class="ns-resize">ns-resize</div>
    <div class="ew-resize">ew-resize</div>
    <div class="ne-resize">ne-resize</div>
    <div class="nw-resize">nw-resize</div>
    <div class="se-resize">se-resize</div>
    <div class="sw-resize">sw-resize</div>
    <div class="nesw-resize">nesw-resize</div>
    <div class="nwse-resize">nwse-resize</div>
</div>

【讨论】：

题外话，你用什么软件做的那个gif动画？等待..@Santosh Khalse @fWd82 检查 ShareX - 录制 gif 我觉得这是一个有用的光标提示，并添加了代码作为工具。这是上面代码的链接：spragucm.com/web-css-cursor-pointers 很棒的动画！ @fWd82 - Peek 也适用于录制屏幕区域的 gif。 github.com/phw/peek 非常详细且解释清楚。【参考方案17】：

只需执行以下操作：

li  
  cursor: pointer;

我将它应用到你的代码上，看看它是如何工作的：

li 
  cursor: pointer;

<ul>
  <li>foo</li>
  <li>goo</li>
</ul>

注意：另外不要忘记您可以使用任何带有自定义光标的手形光标，例如，您可以创建喜欢的手形图标：

div 
  display: block;
  width: 400px;
  height: 400px;
  background: red;
  cursor: url(http://findicons.com/files/icons/1840/free_style/128/hand.png) 4 12, auto;

<div>
</div>

【讨论】：

【参考方案18】：

您也可以使用以下样式：

li 
    cursor: grabbing;

【讨论】：

【参考方案19】：

您可以使用以下方法之一：

li:hover

 cursor: pointer;

或

li

 cursor: pointer;

工作示例 1：

    li:hover
    
     cursor: pointer;
    
<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

工作示例 2：

    li
    
     cursor: pointer;
    
<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

【讨论】：

【参考方案20】：

你可以使用下面的代码：

li:hover cursor: pointer;

【讨论】：

【参考方案21】：

检查以下内容。我从W3Schools 得到它。

.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; 
<!DOCTYPE html>
<html>

<body>
  <h1>The cursor property</h1>
  <p>Mouse over the words to change the mouse cursor.</p>
  <p class="alias">alias</p>
  <p class="all-scroll">all-scroll</p>
  <p class="auto">auto</p>
  <p class="cell">cell</p>
  <p class="context-menu">context-menu</p>
  <p class="col-resize">col-resize</p>
  <p class="copy">copy</p>
  <p class="crosshair">crosshair</p>
  <p class="default">default</p>
  <p class="e-resize">e-resize</p>
  <p class="ew-resize">ew-resize</p>
  <p class="grab">grab</p>
  <p class="grabbing">grabbing</p>
  <p class="help">help</p>
  <p class="move">move</p>
  <p class="n-resize">n-resize</p>
  <p class="ne-resize">ne-resize</p>
  <p class="nesw-resize">nesw-resize</p>
  <p class="ns-resize">ns-resize</p>
  <p class="nw-resize">nw-resize</p>
  <p class="nwse-resize">nwse-resize</p>
  <p class="no-drop">no-drop</p>
  <p class="none">none</p>
  <p class="not-allowed">not-allowed</p>
  <p class="pointer">pointer</p>
  <p class="progress">progress</p>
  <p class="row-resize">row-resize</p>
  <p class="s-resize">s-resize</p>
  <p class="se-resize">se-resize</p>
  <p class="sw-resize">sw-resize</p>
  <p class="text">text</p>
  <p class="url">url</p>
  <p class="w-resize">w-resize</p>
  <p class="wait">wait</p>
  <p class="zoom-in">zoom-in</p>
  <p class="zoom-out">zoom-out</p>
</body>

</html>

【讨论】：

【参考方案22】：

只需使用 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"), pointer;
  color: #0f0;
  background: #000;



/*

li:hover
  cursor: url("../icons/hand.cur"), pointer;


*/

li
  height: 30px;
  width: 100px;
  background: #ccc;
  color: #fff;
  margin: 10px;
  text-align: center;
  list-style: none;

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

参考

https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

【讨论】：

【参考方案23】： 
<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>

点击以下链接查看光标属性的作用：

https://www.w3schools.com/cs-s-ref/tryit.asp?filename=trycss_cursor

【讨论】：

【参考方案24】：

您可以在悬停时更改它，也可以在列表项上指定cursor:pointer，两者都可以。

ul li 
  cursor: pointer;

或者

ul li:hover 
  cursor: pointer;

【讨论】：

【参考方案25】：

只需输入这段代码。

licursor: pointer;

【讨论】：

以上是关于当用户将鼠标悬停在列表项上时，如何将光标变为手形？的主要内容，如果未能解决你的问题，请参考以下文章

将鼠标悬停在 url RichTextBox 上时更改光标

当用户将鼠标悬停在滑块上时，使光标成为手

当用户将鼠标悬停在 TreeView 控件的特定 TreeNode 控件上时显示不同的光标

d3.js - 当鼠标悬停在 SVG 容器上的这些元素上时，如何将光标设置为手？

R情节，当鼠标悬停在图上时正常光标

悬停 <button> 标签时如何让光标变为手形