Tôi đã có một danh sách và tôi có một trình xử lý nhấp chuột cho các mục của nó:

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

Làm cách nào để thay đổi con trỏ chuột thành con trỏ tay (như khi di chuột qua nút)? Ngay bây giờ con trỏ biến thành con trỏ chọn văn bản khi tôi di chuột qua các mục danh sách.

Theo thời gian, như mọi người đã đề cập, giờ đây bạn có thể sử dụng một cách an toàn:

li { cursor: pointer; }

Sử dụng cho li:

li:hover {
    cursor: pointer;
}

Xem thêm thuộc tính con trỏ với các ví dụ sau khi chạy tùy chọn đoạn trích:

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

Bạn không yêu cầu jQuery cho việc này, chỉ cần sử dụng nội dung CSS sau:

li {cursor: pointer}

Và Voila! Tiện dụng.

Sử dụng:

li:hover {
    cursor: pointer;
}

Giá trị hợp lệ khác (mà handlà không ) để đặc tả HTML hiện tại có thể được xem tại đây .

Sử dụng

cursor: pointer;
cursor: hand;

nếu bạn muốn có một kết quả lai!

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

Bạn cũng có thể có con trỏ là một hình ảnh:

.img-cur {
   cursor: url(images/cursor.png), auto;
}

Tôi nghĩ sẽ thật thông minh khi chỉ hiển thị con trỏ tay / con trỏ khi có sẵn JavaScript. Vì vậy, mọi người sẽ không có cảm giác họ có thể nhấp vào thứ gì đó không thể nhấp được.

Để đạt được điều đó, bạn có thể sử dụng jQuery libary JavaScript để thêm CSS vào phần tử như vậy

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

Hoặc chuỗi nó trực tiếp đến trình xử lý nhấp chuột.

Hoặc khi hiện đại hóa kết hợp với <html class="no-js">được sử dụng, CSS sẽ trông như thế này:

.js li { cursor: pointer; }

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

Chỉ để hoàn thiện:

cursor: -webkit-grab;

Nó cũng đưa ra một bàn tay, bàn tay bạn biết khi di chuyển chế độ xem hình ảnh xung quanh.

Nó khá hữu ích nếu bạn muốn mô phỏng hành vi lấy bằng jQuery và mousedown.

Đối với trình duyệt chéo hoàn chỉnh, sử dụng:

cursor: pointer;
cursor: hand;

Đơn giản chỉ cần làm một cái gì đó như thế này:

li { 
  cursor: pointer;
}

Tôi áp dụng nó trên mã của bạn để xem nó hoạt động như thế nào:

li {
  cursor: pointer;
}

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

Lưu ý: Cũng đừng quên bạn có thể có bất kỳ con trỏ tay nào với con trỏ tùy chỉnh, bạn có thể tạo biểu tượng bàn tay fav như thế này chẳng hạn:

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>

Để có thể làm bất cứ điều gì có được điều trị "mousechange", bạn có thể thêm một lớp CSS:

.mousechange:hover {
  cursor: pointer;
}

<span class="mousechange">Some text here</span>

Tôi không nói sẽ sử dụng cursor:handvì nó chỉ hợp lệ cho Internet Explorer 5.5 trở xuống và Internet Explorer 6 đi kèm với Windows XP (2002). Mọi người sẽ chỉ nhận được gợi ý để nâng cấp khi trình duyệt của họ ngừng hoạt động cho họ. Ngoài ra, trong Visual Studio, nó sẽ gạch chân màu đỏ mục đó. Nó nói với tôi:

Xác thực (CSS 3.0): "hand" không phải là giá trị hợp lệ cho thuộc tính "con trỏ"

ul li:hover{
   cursor: pointer;
}

Tất cả các phản hồi khác đề xuất sử dụng con trỏ CSS tiêu chuẩn, tuy nhiên, có hai phương pháp:

1. Áp dụng thuộc tính CSS cursor:pointer;cho các phần tử. (Đây là kiểu mặc định khi con trỏ di chuyển qua nút.)

2. Áp dụng thuộc tính CSS cursor:url(pointer.png);bằng đồ họa tùy chỉnh cho con trỏ của bạn. Điều này có thể được mong muốn hơn nếu bạn muốn đảm bảo rằng trải nghiệm người dùng giống hệt nhau trên tất cả các nền tảng (thay vì cho phép trình duyệt / HĐH quyết định con trỏ con trỏ của bạn sẽ trông như thế nào). Lưu ý rằng các tùy chọn dự phòng có thể được thêm vào trong trường hợp không tìm thấy hình ảnh, bao gồm các url phụ hoặc bất kỳ tùy chọn nào khác tức làcursor:url(pointer.png,fallback.png,pointer);

Tất nhiên những thứ này có thể được áp dụng cho các mục danh sách theo cách này li{cursor:pointer;}, dưới dạng một lớp .class{cursor:pointer;}hoặc như một giá trị cho thuộc tính style của từng thành phần style="cursor:pointer;".

Sử dụng:

ul li:hover{
   cursor: pointer;
}

Để biết thêm các sự kiện chuột, kiểm tra thuộc tính con trỏ CSS .

Bạn có thể sử dụng một trong những điều sau đây:

li:hover
{
 cursor: pointer;
}

hoặc là

li
{
 cursor: pointer;
}

Ví dụ hoạt động 1:

    li:hover
    {
     cursor: pointer;
    }

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

Ví dụ hoạt động 2:

    li
    {
     cursor: pointer;
    }

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

Bạn có thể sử dụng mã dưới đây:

li:hover { cursor: pointer; }

Đối với một biểu tượng bàn tay cơ bản:

Thử

cursor: pointer 

Nếu bạn muốn một biểu tượng bàn tay như kéo một số mục và thả nó, hãy thử:

cursor: grab

Bạn cũng có thể sử dụng kiểu sau:

li {
    cursor: grabbing;
}

Sử dụng HTML Hack

Lưu ý: điều này không được khuyến khích vì nó được coi là thực hành xấu

Gói nội dung trong thẻ neo chứa hrefthuộc tính sẽ hoạt động mà không áp dụng rõ ràng thuộc cursor: pointer;tính với tác dụng phụ của thuộc tính neo (được sửa đổi bằng CSS):

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

Kiểm tra lượt theo dõi. Tôi nhận được nó từ W3Schools .

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

chỉ cần sử dụng CSS để đặt tùy chỉnh con trỏ

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

/* 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;

bản giới thiệu

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

hình ảnh hand.cur

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