我有一个列表，并且有一个用于其项目的点击处理程序：
<ul>
<li>foo</li>
<li>goo</li>
</ul>
如何将鼠标指针更改为手形指针（如将鼠标悬停在按钮上）？现在，当我将鼠标悬停在列表项上时，该指针将变为文本选择指针。
当用户将鼠标悬停在列表项上时，使光标成为手
just using CSS to set customize the cursor pointer
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
/* 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;
demo
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
hand.cur image
li:hover{
cursor: url("../icons/hand.cur"), pointer;
}
You can also use the following style:
li {
cursor: grabbing;
}
For a basic hand symbol:
Try
cursor: pointer
If you want a hand symbol like drag some item and drop it, try:
cursor: grab
You can use the code below:
li:hover { cursor: pointer; }
Using an HTML Hack
Note: this is not recommended as it is considered bad practice
Wrapping the content in an anchor tag containing an href attribute will work without explicitly applying the cursor: pointer; property with the side effect of anchor properties (amended with CSS):
<a href="#" style="text-decoration: initial; color: initial;"><div>This is bad practice, but it works.</div></a>You can use one of the following:
li:hover
{
cursor: pointer;
}
or
li
{
cursor: pointer;
}
Working example 1:
li:hover
{
cursor: pointer;
}<ul>
<li>foo</li>
<li>bar</li>
</ul>Working example 2:
li
{
cursor: pointer;
}<ul>
<li>foo</li>
<li>bar</li>
</ul>ul li:hover{
cursor: pointer;
}
All of the other responses suggest using the standard CSS pointer, however, there are two methods:
Apply the CSS property
cursor:pointer;to the elements. (This is the default style when a cursor hovers over a button.)Apply the CSS property
cursor:url(pointer.png);using a custom graphic for your pointer. This may be more desirable if you want to ensure that the user experience is identical on all platforms (instead of allowing the browser/OS decide what your pointer cursor should look like). Note that fallback options may be added in case the image is not found, including secondary urls or any of the other options i.e.cursor:url(pointer.png,fallback.png,pointer);
Of course these may be applied to the list items in this manner li{cursor:pointer;}, as a class .class{cursor:pointer;}, or as a value for the style attribute of each element style="cursor:pointer;".
对于完整的跨浏览器，请使用：
cursor: pointer;
cursor: hand;
For being able to make anything get the "mousechange" treatment, you can add a CSS class:
.mousechange:hover {
cursor: pointer;
}<span class="mousechange">Some text here</span>I would not say to use cursor:hand since it was only valid for Internet Explorer 5.5 and below, and Internet Explorer 6 came with Windows XP (2002). People will only get the hint to upgrade when their browser stops working for them. Additionally, in Visual Studio, it will red underline that entry. It tells me:
Validation (CSS 3.0): "hand" is not a valid value for the "cursor" property
Simply just do something like this:
li {
cursor: pointer;
}
I apply it on your code to see how it works:
li {
cursor: pointer;
}<ul>
<li>foo</li>
<li>goo</li>
</ul>Note: Also DO not forget you can have any hand cursor with customised cursor, you can create fav hand icon like this one for example:
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>仅出于完整性考虑：
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 behavior using jQuery and mousedown.
用于li：
li:hover {
cursor: pointer;
}
运行snippet选项后，查看更多带有示例的光标属性：
.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>li:hover {cursor: hand; cursor: pointer;}
我认为仅在JavaScript可用时才显示手形/指针形光标会很聪明。因此，人们不会感到可以点击不可点击的内容。
为此，您可以使用JavaScript库jQuery将CSS添加到元素中，如下所示
$("li").css({"cursor":"pointer"});
或将其直接链接到点击处理程序。
或者，当将Modernizer与结合<html class="no-js">使用时，CSS如下所示：
.js li { cursor: pointer; }
采用
cursor: pointer;
cursor: hand;
如果您想获得跨浏览器的结果！
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;
}
正如人们所说，鉴于时间的流逝，您现在可以放心使用：
li { cursor: pointer; }
Check the following. I get it from W3Schools.