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

我有一个列表，我有一个单击处理程序来处理它的项目：

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

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

2433941 次浏览
小开

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

li {cursor: pointer}

瞧！方便。

小开
最佳答案

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

li { cursor: pointer; }
小开

使用

cursor: pointer;cursor: hand;

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

小开

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

cursor: pointer;cursor: hand;
小开

用途：

li:hover {cursor: pointer;}

对于当前的超文本标记语言规范，其他的有效值（hand是没有）可以查看这里。

小开 
li:hover {cursor: hand; cursor: pointer;}
小开

我认为只在JavaScript可用时显示指针/指针光标是明智的。所以人们不会觉得他们可以点击不可点击的东西。

为了实现这一点，您可以使用JavaScript库jQuery将CSS添加到元素中，如下所示

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

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

或者当现代化者与<html class="no-js">组合使用时，CSS看起来像这样：

.js li { cursor: pointer; }
小开

为了使任何东西都能得到“Mousechange”处理，您可以添加一个CSS类：

.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

小开

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;}
小开 
ul li:hover{cursor: pointer;}
小开

对于一个基本的手符号：

试试看

cursor: pointer

如果您想要一个手形符号，例如拖动某些项目并将其丢弃，请尝试：

cursor: grab
小开

用途：

ul li:hover{cursor: pointer;}

有关更多鼠标事件，请选中CSS游标属性。

小开

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

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

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

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

小开

使用超文本标记语言Hack

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

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

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

小开

为了完整性：

cursor: -webkit-grab;

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

如果你想使用jQuery和mousedown模拟抓取行为，这是非常有用的。

在此处输入图片描述

小开

使用li：

li:hover {cursor: pointer;}

运行代码段选项后，通过示例查看更多游标属性：

一个动画，显示光标悬停在每个类的div上

.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 {cursor: pointer;}

我将其应用于您的代码以查看它是如何工作的：

li {cursor: pointer;}
<ul><li>foo</li><li>goo</li></ul>

备注：此外不要忘记您可以拥有任何带有自定义光标的手部光标，您可以创建像这样的FAV手部图标，例如：

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>

小开

您还可以使用以下样式：

li {cursor: grabbing;}
小开

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

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>

小开

您可以使用下面的代码：

li:hover { cursor: pointer; }

小开

检查以下内容。我从W3学校得到它。

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

小开

只需使用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;

demo

注意：许多格式图标的光标支持！

例如.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

小开 
<style>.para{color: black;}.para:hover{cursor: pointer;color: blue;}</style><div class="para">

在上面的超文本标记语言代码[： 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/cssref/tryit.asp?filename=trycss_cursor

小开

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

ul li {cursor: pointer;}

或者

ul li:hover {cursor: pointer;}
小开

简单地写这个代码。

li{cursor: pointer;}

提交答案