CSS 当用户将鼠标悬停在列表项上时，将光标变成一只手
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3087975/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make the cursor a hand when a user hovers over a list item
提问by user246114
I've got a list, and I have a click handler for its items:
我有一个列表，并且我有一个用于其项目的点击处理程序：
<ul>
<li>foo</li>
<li>goo</li>
</ul>
How can I change the mouse pointer into a hand pointer (like when hovering over a button)? Right now the pointer turns into a text selection pointer when I hover over the list items.
如何将鼠标指针更改为手形指针（例如悬停在按钮上时）？现在，当我将鼠标悬停在列表项上时，指针会变成文本选择指针。
回答by Aren
In light of the passage of time, as people have mentioned, you can now safely just use:
随着时间的流逝，正如人们所提到的，您现在可以安全地使用：
li { cursor: pointer; }
回答by Santosh Khalse
Use for li:
用于li：
li:hover {
cursor: pointer;
}
See more cursor properties with examples after running snippet option:
运行代码段选项后，通过示例查看更多游标属性：
.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>回答by Denis 'Alpheus' Cahuk
You do not require jQuery for this, simply use the following CSS content:
为此，您不需要 jQuery，只需使用以下 CSS 内容：
li {cursor: pointer}
And voilà! Handy.
瞧！便利。
回答by Alastair
回答by biancardi
Use
用
cursor: pointer;
cursor: hand;
if you want to have a crossbrowser result!
如果你想要一个跨浏览器的结果！
回答by Khaja Md Sher E Alam
CSS:
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; }
You can also have the cursor be an image:
您还可以将光标设为图像：
.img-cur {
cursor: url(images/cursor.png), auto;
}
回答by Christoph
I think it would be smart to only show the hand/pointer cursor when JavaScript is available. So people will not have the feeling they can click on something that is not clickable.
我认为在 JavaScript 可用时只显示手/指针光标是明智的。所以人们不会觉得他们可以点击一些不可点击的东西。
To achieve that you could use the JavaScript libary jQuery to add the CSS to the element like so
为此，您可以使用 JavaScript 库 jQuery 将 CSS 添加到元素中，如下所示
$("li").css({"cursor":"pointer"});
Or chain it directly to the click handler.
或者将它直接链接到点击处理程序。
Or when modernizerin combination with <html class="no-js">is used, the CSS would look like this:
或者当Modernizer与 结合<html class="no-js">使用时，CSS 将如下所示：
.js li { cursor: pointer; }
回答by Xedret
li:hover {cursor: hand; cursor: pointer;}
回答by Kai Noack
Just for completeness:
只是为了完整性：
cursor: -webkit-grab;
It also gives a hand, the one you know when moving the view of an image around.
它还提供了一只手，即您在四处移动图像视图时所知道的那只手。
It is quite useful if you want to emulate grab behaviorusing jQuery and mousedown.
如果您想使用 jQuery 和 mousedown模拟抓取行为，这将非常有用。
回答by Erich Toven
For complete cross browser, use:
对于完整的跨浏览器，请使用：
cursor: pointer;
cursor: hand;
