关于css：当用户将鼠标悬停在列表项上时，将光标放在手上


Make the cursor a hand when a user hovers over a list item

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul>

 
<li>
foo
</li>

 
<li>
goo
</li>


</ul>

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

相关讨论

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

1
li { cursor: pointer; }
相关讨论

用于li：

1
2
3
li:hover {
    cursor: pointer;
}

运行代码段选项后，请参阅示例中的更多游标属性：

An animation showing a cursor hovering over a div of each class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
.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
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
Example of cursor


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

相关讨论

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

1
li {cursor: pointer}

瞧！便利。

使用：

1
2
3
li:hover {
    cursor: pointer;
}

可以在此处查看当前HTML规范的其他有效值(hand不是)。

相关讨论

使用

1
2
cursor: pointer;
cursor: hand;

如果你想要一个crossbrowser结果！

相关讨论

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.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; }

您还可以将光标设为图像：

1
2
3
.img-cur {
   cursor: url(images/cursor.png), auto;
}
相关讨论

1
li:hover {cursor: hand; cursor: pointer;}

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

为此，您可以使用JavaScript库jQuery将CSS添加到元素中

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

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

或者当使用与组合的现代化器时，CSS将如下所示：

1
.js li { cursor: pointer; }

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

1
2
cursor: pointer;
cursor: hand;

只是为了完整性：

1
cursor: -webkit-grab;

它还提供了一个手，一个你在移动图像视图时所知道的手。

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

Enter image description here

只需做这样的事情：

1
2
3
li {
  cursor: pointer;
}

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

1
2
3
li {
  cursor: pointer;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul>

 
<li>
foo
</li>

 
<li>
goo
</li>


</ul>

注意：也不要忘记你可以使用自定义光标的任何手形光标，你可以创建像这样的手形图标，例如：

1
2
3
4
5
6
7
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;
}
1
 

1
2
3
ul li:hover{
   cursor: pointer;
}

为了能够使任何东西得到"鼠标变换"处理，你可以添加一个CSS类：

1
2
3
.mousechange:hover {
  cursor: pointer;
}
1
<span class="mousechange">Some text here</span>

我不会说使用cursor:hand，因为它仅对InternetExplorer 5.5及以下版本有效，而InternetExplorer6则附带WindowsXP(2002)。当浏览器停止为他们工作时，人们只会得到提升的提示。此外，在Visual Studio中，它将红色下划线表示该条目。它告诉我：

Validation (CSS 3.0):"hand" is not a valid value for the"cursor"
property

使用：

1
2
3
ul li:hover{
   cursor: pointer;
}

有关更多鼠标事件，请检查CSS游标属性。

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

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

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

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

    您可以使用以下之一：

    1
    2
    3
    4
    li:hover
    {
     cursor: pointer;
    }

    要么

    1
    2
    3
    4
    li
    {
     cursor: pointer;
    }

    工作示例1：

    1
    2
    3
    4
        li:hover
        {
         cursor: pointer;
        }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <ul>

     
    <li>
    foo
    </li>

     
    <li>
    bar
    </li>


    </ul>

    工作示例2：

    1
    2
    3
    4
        li
        {
         cursor: pointer;
        }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <ul>

     
    <li>
    foo
    </li>

     
    <li>
    bar
    </li>


    </ul>

    使用HTML Hack

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

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

    1
    This is bad practice, but it works.

    相关讨论

    您还可以使用以下样式：

    1
    2
    3
    li {
        cursor: grabbing;
    }

    您可以使用以下代码：

    li:hover { cursor: pointer; }

    对于基本手形符号：

    尝试

    1
    cursor: pointer

    如果你想要一个手形符号，比如拖动一些项目并放下它，请尝试：

    1
    cursor: grab

    检查以下内容。我是从W3Schools那里得到的。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    <!DOCTYPE html>
    <html>
        <head>
            <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>
        </head>

        <body>
            The cursor property
            <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设置自定义光标指针

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    /* 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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <ul>

     
    <li>
    a
    </li>

     
    <li>
    b
    </li>

     
    <li>
    c
    </li>


    </ul>

    hand.cur image

    1
    2
    3
    li:hover{
       cursor: url("../icons/hand.cur"), pointer;
    }